XMLHttpRequest cannot load issue with ZScaler

Question

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 page that pass through ZScaler proxy, I'm getting XMLHttpRequest cannot load exception on chrome. It is because when passing through the proxy the origin url is changed.

I tried adding header Access-Control-Allow-Origin and also with JSONP. but nothing worked.

Regards ArunDhaJ

Answer 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