Html5 cors

Hey All,

I’ve been having an issue for the last couple of days with posting scores to a dreamlo.com scoreboard from an HTML5 build hosted on an AmazonS3 server. The scoreboard.js hosted on the same AmazonS3 server to GET and display the scores works great (This is external from the HTML5 build, and is part of the webpage outside of the game). For some reason trying to post from the game gets the error:

XMLHttpRequest cannot load https://www.dreamlo.com/lb/SECRETCODE/add/AAA_23378/4078/4548/City_State. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s3.amazonaws.com’ is therefore not allowed access.

  • The HttpRequest POST function used
    works perfectly on a PC and Editor
    build.
  • The Dreamlo website has the
    following CORS policy:
    https://www.dreamlo.com/crossdomain.xml
  • All the S3 files are set to public.
  • We can make the same call to the same URL using javascript from the S3 server, but a call from the game results in the CORS issue.

Where exactly should the “Access-Control-Allow-Origin” CORS permission be placed? Tried it in a few places on the AmazonS3 server with no results. It seems that it needs to be placed somewhere in the build.

Any feedback would be greatly appreciated.

If you are doing a simple XHR GET from a page hosted on S3 to dreamlo.com, the first odd thing here is that there is even a preflight request occurring. That should not be the case, preflight requests are not default behavior on XHRs, but only need to be made in certain specific cases. Here is a list of when cross-origin requests will be preflighted: Cross-Origin Resource Sharing (CORS) - HTTP | MDN

I know Chrome had a bug in the past that they preflighted requests that did not need to be, and that caused some issues. They may have fixed it since. Try running in Firefox Nightly and use its Network devtools tab to verify what type of response headers you get from the XHR that happens to that dreamlo.com site.

It is expected that the HttpRequest POST will work from a PC build, because native PC builds of UE4 don’t partake in CORS security at all, but they simply ignore it. CORS security is something that web browsers implement on the client browser’s side, it’s not something that the web server itself would mandate, except by providing the necessary configuration fields which tell the browser how to operate the CORS security. That is, a bad browser that had CORS disabled would also be able to run “fine”. (e.g. Chrome can be run with CORS disabled

The “Access-Control-Allow-Origin: *” header (or perhaps bit more strictly, “Access-Control-Allow-Origin: something.at.s3.amazonaws.com” header) should be present on the dreamlo.com web server configuration.

If you do figure that the HTTP request needs indeed to be preflighted (as per above link), then make sure that the dreamlo.com server also properly handles these preflight requests by setting the necessary Access-Control-Allow-Origin headers on those preflights.Try using the browser’s Network devtool to trace the HTTP requests and what the request and response headers are to figure out which one does not contain the necessary fields for CORS to succeed.

Hey juj, thanks for the reply!

It wouldn’t even work from a local Apache server.

We ended up solving this issue by making a JS call using emscripten.

Appreciate all the information you provided!

Could you walk through the steps on what you did? Did you add to the htaccess or in the gamename.html? Im having this issue too!