Xmlhttprequest Cannot Load Issue With Zscaler

I've hosted a website in an EC2 instance, and accessing the page with http://ec2... url. The page makes ajax requests to another webapp hosted on the same instance. If I access the

Solution 1:

I had the same issue and the CORS message was in fact misleading for me.

The setup

An amazon EC2 instance with a nginx serving the frontend and proxy_passing request on /api/ to an IIS server located on the same instance

The problem

When the user click on the button, the AJAX request fails because of the following error message:

Fetch API cannot load https://gateway.zscaler.net/auD?origurl=http%3A%2F%2Fmyapi&wexps=1&_ordtok=S243WVLHBRDR5VWQ8PfZ4pnDJ8. Redirect from 'https://gateway.zscaler.net/auD?origurl=http%3A%2F%2Fmyapi&wexps=1&_ordtok=S243WVLHBRDR5VWQ8PfZ4pnDJ8' to 'https://gateway.zscaler.net/auT?origurl=http%3A%2F%2Fmyapi&wexps=1&_ordtok=S243WVLHBRDR5VWQ8PfZ4pnDJ8&wexps=1' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://myapi' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

However everything worked with direct access to internet (zscaler proxy disabled).

The solution

I was using the fetch method to make AJAX requests and this method ignores cookies by default. The API request was redirected to the zscaler auth page which was on another domain and caused the CORS error message.

Passing the options credentials: 'same-origin' to fetch calls solved the issue.

More details here

Solution 2:

I haven't yet found a perfect solution. However, find below the workarounds used:

For development, I start chrome disabling the security feature as:

chrome.exe--disable-web-security

Else, we need to configure the zscaler settings to whitelist the URL. I don't know how to configure it, our IT team did it.

Hope it helps.