WebGL, CORS and XMLHttpRequest.withCredentials

Hi,

So we have a WebGL project that's calling out to a third party API. Under the hood I understand that a WebGL Unity Player makes it HTTP calls via XMLHttpRequest, but because we're going cross domain issues arise. We need to use cookie based auth, which means setting up CORS and setting XMLHttpRequest.withCredentials to true.

We've already got the appropriate CORS headers in place, but setting XMLHttpRequest.withCredentials is more of an issue. Without it the request doesn't succeed, as the session cookie the API is setting doesn't propagate into future requests once it's been set. Is there a way of actually setting the XMLHttpRequest.withCredentials flag when kicking off a request via WWW or UnityWebRequest? Or are we going to be forced into writing a JavaScript plugin to support this? That seems like a rather complex solution to the problem, and something we'd rather avoid.

 

hi alexsuvorov:
I put the above code to my project, but packaged webgle error, can not start, my version is unity 5.3.5, how to deal with this problem

 

I can confirm this hack still works with 2018.3.8f1 when using it as a Plugin.

 

This solution no longer appears to work in 2019.1.2...?

Console reports - Uncaught TypeError: Cannot redefine property: asmLibraryArg

 

I have the same problem in 2019.1.14f1 and 2019.2.6f1. I have a .jspre file where I define the "asmLibraryArg" property:

Code (JavaScript):

1. Object.defineProperty(Module, "asmLibraryArg", {
2.     set: function (value) {
3.       value._JS_WebRequest_Create = function (url, method) {
4.         var http = new XMLHttpRequest;
5.         var _url = Pointer_stringify(url);
6.         var _method = Pointer_stringify(method);
7.         http.open(_method, _url, true);      
8.         if (_url.includes("openid/authorize") || _url.includes("v1/auth")) { // using credentialed XMLHttpRequest for obtaining authorization code
9.             http.withCredentials = true; // can be also set conditionally depending on the _url variable
10.         }
11.         http.responseType = "arraybuffer";
12.         wr.requestInstances[wr.nextRequestId] = http;
13.         return wr.nextRequestId++;
14.       }
15.       Module._asmLibraryArg = value;
16.     },
17.     get: function () { return Module._asmLibraryArg; }
18.   });

As I can see the generated WebGL code already contains this property:

Code (JavaScript):

1. if (Module.CachedXMLHttpRequestDisable !== true) {
2.                 Object.defineProperty(Module, "asmLibraryArg", {
3.                     get: (function() {
4.                         return Module.realAsmLibraryArg
5.                     }
6.                     ),
7.                     set: (function(value) {
8.                         if (typeof value == "object" && typeof value._JS_WebRequest_Create == "function")
9.                             value._JS_WebRequest_Create = CachedXMLHttpRequest.wrap(value._JS_WebRequest_Create);
10.                         Module.realAsmLibraryArg = value
11.                     }
12.                     )
13.                 })
14.             }

Do you know how to solve this problem?

Update 2019-10-30
The solution to the problem was to remove our function as the function provided by Unity is correct.

 

Hi I'm running into the exact problem. Can you (or anyone else who has came across this) clarify how did you solve this?

If I remove my .jspre then I run into CORS problems as withCredentials is not set.

 

Same problem trying to fetch a live stream from twitch everything works on the editor, but once I upload the webgl to a server I get the CORS error...

using Unity 2020