CORS access control help

JavaScript
#1

I’m having immense trouble figuring out how to deal with CORS policy via URLRequest Headers.

when I use openfl.display.Loader without any headers, like so:

var loader = new Loader();
loader.load(new URLRequest(medalData.icon));

I get the following error:

Access to image at 'https://img.ngfiles.com/icons/medal_secret.png'
from origin 'http://127.0.0.1:3000' has been blocked by
CORS policy: The 'Access-Control-Allow-Origin' header has a
value 'https://www.newgrounds.com' that is not equal to the
supplied origin. [http://127.0.0.1:3000/]

So I tried

var loader = new Loader();
var request = new URLRequest(medalData.icon);
request.requestHeaders.push(new URLRequestHeader("Access-Control-Allow-Origin", "http://127.0.0.1:3000/"));
loader.load(request);

and got:

Access to XMLHttpRequest at 'https://img.ngfiles.com/icons/medal_secret.png'
from origin 'http://127.0.0.1:3000' has been blocked by 
CORS policy: Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the
requested resource. [http://127.0.0.1:3000/]

I find this confusing because in the first case even though I’m not manually adding a header, it apparently has the header for newgrounds.com, but when i try to add a header, it says no header is present. I know very little about dealing with CORS and http headers in general (this post is likely evident of that) so any help would be greatly appreciated

#2

Headers have to be setup on the server side, not the client.
This page shoud help you to understand how CORS works :

2 Likes
#3

Apparently I should be running my browser with CORS features disabled, as this is for testing something that will be hosted on the same domain as the server

#4

If you want to test locally, I’d suggest to put your assets in the same folder as your HTML5 build, and load them with a relative path (e.g. “./Data/myImage.png”).
When you run your project in test mode, lime starts a local web server and serves all assets with your html5/bin folder as the web root.

1 Like
#5

sure, but I’m specifically testing the loading of external files from a remote server

#6

For local test you can try to add some chrome extensions such as https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
or https://chrome.google.com/webstore/search/cors

#7

@LarryB : they have become totally useless, at least for me, since Chrome was updated about 1 month ago.

@GeoKureli : we added the following in the resource service configuration

image
image.jpg855×169 53.9 KB

hope this can help.

1 Like