WebGL WWW security (Cross-Origin Resource Sharing) help please

I'm getting the following error message whilst attempting to login via our server endpoint:

XMLHttpRequest cannot load ???????. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '????????' is therefore not allowed access. The response had HTTP status code 404.

Based on this http://docs.unity3d.com/Manual/webgl-networking.html and a bit of searching online, we tried adding the following headers to the login page:

Code (csharp):

1.  
2. "Access-Control-Allow-Credentials": "true",      
3. "Access-Control-Allow-Headers": "Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time",       "Access-Control-Allow-Methods": "GET, POST, OPTIONS",      
4. "Access-Control-Allow-Origin": "*",
5.  

and I've also tried adding the headers to the WWW request in code:

Code (csharp):

1.  
2. Dictionary<string, string> headers = new Dictionary<string, string>();
3.  
4. #ifUNITY_WEBGL
5. headers.Add("Access-Control-Allow-Credentials", "true");
6. headers.Add("Access-Control-Allow-Headers", "Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time");
7. headers.Add("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
8. headers.Add("Access-Control-Allow-Origin", "*");
9. #endif
10.  
11. WWW www = new WWW(url, null, headers);
12.  

Should these headers be set on just the server response or the client's request?

Any help would be greatly appreciated.

 

These headers should be set to the server's response.

 

Thanks for clearing that up. It's not working for us with the headers on both. I'll do a new build with just the headers on the server and a completely normal WWW request.

We're also beginning to wonder if we even have this enabled on the server or not. We're using wpengine.com so maybe we have to do some fiddling around to turn everything on.

 

Just in case anyone else encounters this issue. Don't send the headers as part of the request. Get the server to send them as part of the response. We had to enable CORS in our rails app before anything would start working.

You only get a subset of the www.responseHeaders back that you would normally get via a WWW request in the WebPlayer. We weren't getting back the HTTP 'status' header but it seems like you can tell the server to correct this using :

"Access-Control-Expose-Headers" : "Status" (haven't actually tested this yet so this maybe incorrect)

 

Yep, that's because CORS is meant to stop cross domain requests. The reason it has to be in the response is because it's the server telling the browser "yes, we will trust and accept requests from you and your domain origin". Note that you should also be able to specify which origins you trust (at least you can in the WebApi CORS library). That way you don't just blindly enable CORS and open your endpoint up to the world. You just limit it to the domain(s) your WebGL app is being served from.

 

i agree the response of liortal: "These headers should be set to the server's response."

 

So my master plan to let users download images from their dropbox account using WWW-class is not going to work then I guess as I can't set the servers response?

Or am I misinterpreting the info above?

 

Thank you so much for answering, this has been having me tearing my hair off for a few days
I am a pure c# coder/math guy with no experience with the web at all so I may not understand everything you write about...

1) I read about this before but this is only an option if I host the WebGL app on dropbox which I was hoping not to do. But it does work if you change the image link url a bit. Still, this only allows for users to upload images to dropbox so it isn't optimal.

2) Interesting.. So I could have the page where I want it to be and keep just the WebGL app on dropbox?

3) Umm you kinda lost me there This is probably out of my comfort zone anyway haha


What I really want to do is just let a user upload images to my WebGL app. I need to be able to read individual pixels because I will be running some image analysis magic o them. Going the path via dropbox was just a workaround because I couldn't figure out a way to load them from the users harddrive using WebGL but maybe there is a solution for that?

 

To expound on this a bit, here's a sample of some JavaScript that uses postMessage to send data to an iFrame. It may need to be tweaked a bit to support all browsers... contentWindow might only work in IE:

Code (csharp):

1.  
2. if (target && target.contentWindow) {
3.  target.contentWindow.postMessage(message, '*');
4.  }
5.  

In this case "target" is a reference to the iFrame element. On the receiving side it looks something like this:

Code (csharp):

1.  
2. window.addEventListener('message', messageHandler);
3.  

messageHandler is just a function that's executed and from there you can verify the source (origin):

I do something like this:

Code (csharp):

1.  
2.   var messageHandler = function (e) {
3.       var message = e.data;
4.  
5.       if (sourceWindow == null)
6.         sourceWindow = e.source;
7.  
8. };
9.  

No I'm not verifying origin because I'm using this in an internal only application. Also, by capturing e.source, you can use that reference to use sendMessage and kick messages back to the sending page / frame. If you get very deep into it I can share a bit more code with you as I've created a complete event and command binder that I use to marshal commands and events along with data back and forth between windows using sendMessage.

 

You're absolutely right, I started feeling that I was hijacking the thread, sorry about that...

I started a new thread for my specific issue of loading an image in WebGL from harddrive instead:
http://forum.unity3d.com/threads/ho...from-their-harddrive-into-a-webgl-app.380985/

Thank you so much @alexsuvorov and @Dustin Horne for your help, I think in the future I will look into your online solutions to load images from e.g. dropbox, onedrive etc as well.

 

Just to help anyone finding this thread: the Access-Control-Expose-Headers header should be set on the primary response call alongside the headers you want to access, NOT on the pre-flight OPTIONS response.

Cheers!

 

Im having CORS problems on the same domain. Do you know what could be happening? Im using chrome and WebGL

Failed to load https://thisisnotanumber.org/rastreadoras/media/imagen.jpg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.thisisnotanumber.org' is therefore not allowed access.

 

add
<?php
header("Access-Control-Allow-Origin: *");

add this to php file hosted on the server.Both get and post request started working

 

Hi,
I've created an application with this script (https://forum.unity.com/threads/raw-data-export-example-script.460957/) to request a Raw Data Export of the Unity Analytics data. This works fine in the editor and also in the .exe application.
If I build a WebGL build and put it on our server, I get the "Unknown Error". I tried some things with .htaccess on my end, but I read that it must be done on the server. So the question is if Unity Analytics (https://analytics.cloud.unity3d.com) supports CORS, right?
Any idea what I could do next?
Thanks

 

thankyou!! solve my problem

 

Hi, I'm having the same issue nut only in Firefox... Do you know how to fix it?

 

Hi, I have hosted my game in for example https://www.mygame.com and want to load images from Amazon S3. I already put CORS headers on Amazon S3 bucket but still does not work. But if I enable CORS on my firefox browser it works fine but my game is in a web server not in my localhost. I dont understand. Please any help? Thanks!!

 

The real MVP

 

Eh what do you mean? Into the index.html file?
How about the AmazonS3 settings?
Should it be as set below?

 

I'm having the same problem. Can someone suggest a solution?

 

I have same problem too. Can someone please help about that.

 

Yup and still didn't resolve that one either

 

Anyone try this method out

2) If your WebGL main page is located on another domain, then you can create a hidden iframe with an html hosted on the same domain where the images are hosted. Such an iframe will be able to download the images using XMLHttpRequest and transfer them back to the WebGL application on the main page (using postMessage for page interaction and jslib plugin for interaction with WebGL)


some examples of code perhaps ?