Unity Web Request: CORS error on WebGL hosted on AWS but works on editor

Hi everyone!

As a part of my authentication system in my web gl app, I need to request the Squarespace API to check for orders to confirm that the current user has purchased a subscription.

I am currently doing this by doing a web request to the API endpoint by adding a header with the API key.

This then should return a JSON which I can format into the data I need.

This works perfectly on windows & editor builds, however when deploying the WebGL app and hosting it on AWS (embedded in my Squarespace website), I get this error:

 Access to fetch at 'https://api.squarespace.com/1.0/commerce/orders?cursor=' from origin 'https://3dtinyhousebuilderfreev1.s3.ap-southeast-2.amazonaws.com' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I am aware that the response needs to have the “Access-Control-Allow-Origin” header, however, I am unsure how I can change that, as I do not own the Squarespace API server, hence not being able to change any settings.

Here is the code handling the request:

         //----Communicate with server and get squarespace data-----//
         string apiRequestURL = "https://api.squarespace.com/1.0/commerce/orders?cursor=";
         var request = new UnityWebRequest(apiRequestURL, "0");
         request.downloadHandler = new DownloadHandlerBuffer();
         request.SetRequestHeader("Content-Type", "application/json");
         request.SetRequestHeader("Authorization", "Bearer APIKEY");// My code actually contains the API key, I just can't display it here ;)
         //request.SetRequestHeader("Access-Control-Allow-Origin", "*"); - I tried this, this did not make a difference.
         yield return request.SendWebRequest();//Returns the result of the request    
         Dictionary<string, object> downloadedData;
         downloadedData = new(JsonConvert.DeserializeObject<Dictionary<string, object>>(request.downloadHandler.text));//Turns data into the Dictionary downloadedData

If you want to replicate the error, load my development build here: https://www.tinyeasy.co.nz/bugtest-3d-tiny-house-designer

The error appears as soon as you try login/signup.

I am not sure where to start with this, so any help is very appreciated!!!

CORS errors have to be fixed server-side, if you can’t change the server configs, you might have to run your own server in between to relay the request. This is beyond the scope of Unity, though :slight_smile:

1 Like

Add these to your server response headers:
“Access-Control-Allow-Credentials”: “true”,
“Access-Control-Expose-Headers”: “Content-Length, Content-Encoding”,
“Access-Control-Allow-Headers”: “Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time, Content-Type”,
“Access-Control-Allow-Methods”: “GET, POST, OPTIONS”,
“Access-Control-Allow-Origin”: “*”

Thank you for your reply! You are completely right… After a LOT of reading I managed to wrap my head around CORS and realised that it wasn’t a Unity issue.

I managed to resolve this by using a CORS proxy server to relay the request and it now works like a charm. For anyone who has the same problem, use the first method of “sideshowbarker” found here:

https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141

Thanks again!

3 Likes

If you use Azure Portal and Blob Containers you need to set a CORS Rule: