Community

  • Cross Origin Issues on HTML5 game posted

    I'm trying to use the AppNext API to display an App Wall in my game but I'm running into cross origin issues when attempting to display ad images. How can I get around cross origin issues in HTML5?

    Reply
  • Hello,
    You can use jsonp instead of json or xml, I can send you the code to use API call with jsonp to your email if you like.

  • I'm able to read the json just fine. The problem is the images in the urlImg property in the returned json. Trying to display those images in the canvas triggers a cross origin error. Aren't the images CORS enabled? See:
    https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

  • Here's a simple test page that attempts to draw the image in a canvas:

    https://dl.dropboxusercontent.com/u/4489901//09805348503485034534/test.html

    View it in Chrome. You'll get a blank page. Opening the Console in Chrome should show the error:

    Image from origin 'https://appnext-a.akamaihd.net' has been blocked from loading by Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'https://dl.dropboxusercontent.com' is therefore not allowed access

  • Hi,

    Please use this code to load urlimg:
    <!DOCTYPE HTML>
    <html>
    <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'https://appnext-a.akamaihd.net//banner/Icon_DraftHero-Daily-Fantasy-Sports.jpg';
    </script>
    

    </body>
    </html>

    Please let me know if this solve your issue.

  • Thanks for the reply varditn. While loading the images does indeed work on canvas. It doesn't work when drawing images on a WebGL canvas without the CORS header. In order for me to to display the images I'd have to resort to creating a proxy.

  • Ok,
    I found this page, it has an example how to use CORS in webgl, I hope it will help:
    https://developer.mozilla.org/en-US/docs/Web/WebGL/Cross-Domain_Textures

    Reply
Loading ...