topic Re: No 'Access-Control-Allow-Origin' HELP!! in ArcGIS JavaScript Maps SDK Questions

No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Sat, 11 Dec 2021 17:51:31 GMT

I've been dealing with this issue for a while. I have a geoprocessing tool on the ArcGIS server that generates a report from a map click. I get the CORS error when the server tries to return the report PDF to the popup in the map window.

I've tried adding this to our webconfig file, and it doesn't help.

<customHeaders>  
                    <add name="Access-Control-Allow-Origin" value="*" />  
                    <add name="Access-Control-Allow-Headers" value="*" />  
                    <add name="Access-Control-Allow-Methods" value="*" />  
               </customHeaders>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I tried adding this to my JavaScript code and it worked in once instance, but not another.

esriConfig.defaults.io.corsEnabledServers.push("ourserver.com")

I've also tried removing these lines from the webconfig and adding "Access-Control-Allow-Origin, * " under HTTP response headers in our IIS web server manager and I get this error "The 'Access-Control-Allow-Origin' header contains multiple values 'null, *', but only one is allowed. Origin 'null' is therefore not allowed access."

I'm pulling my hair out trying figure this out.

Re: No 'Access-Control-Allow-Origin' HELP!!

katahV — Fri, 03 Nov 2017 10:50:55 GMT

Hi Levi,

I suggest to remove the custom Headers from your webconfig file. You have to be able to configure that using the ArcGIS Server and the client configuration.

Are the ArcGIS Server and the Client on the same machine? Are they on the same domain?
Please, check the CORS configuration of your ArcGIS Server, usually under the following url: https://yourserver.com/arcgis/admin/system/handlers/rest/servicesdirectory and check the property AllowedOrigins.
Do you use a client wrote using ArcGIS-JS-API or it is on top of WebApp Builder?

Re: No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Sat, 11 Dec 2021 17:51:33 GMT

Hi Victor,

1. Yes, they are on the same Windows Server 2012 machine.

2. Allowed origins is set to "*". I tried adding the URL of our webserver and it didn't help.

3. I wrote everything in ArcGIS-JS-API, yes. No WAB.

I think the section that's causing all the errors is below. This checks to see if the report has already been generated, and if so, returns it to the popup. If I uncomment line 6, it doesn't help.

var http = new XMLHttpRequest();
                     var contentResult = "";
                     
                    
                     http.open('HEAD', reportPath, false);
                     //http.setRequestHeader('Access-Control-Allow-Headers', '*');
                     http.send();
                     //console.log(http.status);
                    
                    if(http.status === 200){
                         contentResult ='<a target="_blank" href="' + reportPath + '"><IMG SRC="' + pdfIcon + '"width=25% height=25%/></a>';
                         clearInterval(dots);
                         window.map.infoWindow.resize(256,256);
                         window.map.infoWindow.setContent(contentResult);
                         window.map.infoWindow.setTitle(displayCountry + " Forecast Analysis Report");
                    }
                    else{
                         window.gp_report.execute(taskParams,gpreportResultAvailable,gpreportFailure);
                    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: No 'Access-Control-Allow-Origin' HELP!!

ThomasSolow — Mon, 06 Nov 2017 19:46:51 GMT

I would recommend using esri/request for HTTP requests if that's possible. It's been a while since I've manually sent an XMLHttpRequest but I think you need to set the onload property to a function that will be called when the response is received. In the sample you posted, the status will never be 200. edit - disregard this, looks like the third argument specifies whether the request should be async or not.

In terms of the header, setting it in the browser shouldn't make a difference. The question is whether the server is responding with the correct headers. So my feeling is that you did the right thing by configuring your server to append the missing header, but it's possible that something went wrong with this process.

The easiest way to check is to look at the browser's dev tools and open the network tab. Manually inspect the failing request and see if the response is missing the header. If so, this is still an issue that needs to be solved on the backend by configuring your server to reply with the proper headers.

Re: No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Mon, 06 Nov 2017 20:20:15 GMT

I changed the async from false to true and that helped. How would you suggest I change this portion of the script to use esri/request? I need it to check to see if the report exists already at the URL, and if so, return it. If not, run the gp_report tool. Right now it's just generating reports regardless.

According to the API reference, request can handle plain text, XML, JSON, and JSONP. Is it restricted to those, or can I retrieve a PDF as well?

Re: No 'Access-Control-Allow-Origin' HELP!!

ThomasSolow — Sat, 11 Dec 2021 17:51:36 GMT

Well, you're using a HEAD http verb, which esriRequest doesn't support. Just in general I find it easier to use some nicer JavaScript wrapper than working with XMLHttpRequests directly.

You could try to change your code to this and see what happens:

var http = new XMLHttpRequest();
var contentResult = "";
                     
http.onload = function(evt) {
  if(http.status === 200){
    contentResult ='<a target="_blank" href="' + reportPath + '"><IMG SRC="' + pdfIcon + '"width=25% height=25%/></a>';
    clearInterval(dots);
    window.map.infoWindow.resize(256,256);
    window.map.infoWindow.setContent(contentResult);
    window.map.infoWindow.setTitle(displayCountry + " Forecast Analysis Report");
  }
  else{
    window.gp_report.execute(taskParams,gpreportResultAvailable,gpreportFailure);
  }
}

http.open('HEAD', reportPath, true);
                     ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Mon, 06 Nov 2017 20:59:31 GMT

OK. I changed the code and clicked on a location that already has a report. I got this error and it proceeded to generate the report again.

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Re: No 'Access-Control-Allow-Origin' HELP!!

ThomasSolow — Mon, 06 Nov 2017 21:25:11 GMT

I don't know why the error thinks your origin is 'null'. How are you running the web application? Is it hosted on a web server, or are you running it from its file path?

Also, can you inspect the request in your browser's dev tools and check for the "Access-Control-Allow-Origin" header on the response? Take a look at the response and see it looks correct.

If there's no header, you might have to keep playing around with the server to get it to add the proper response headers.

Re: No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Mon, 06 Nov 2017 21:49:00 GMT

I haven't been able to figure out the null origin either. The application is a GP Python tool on our Arc GIS server.

Here's what I see. The status code is 200 (meaning the report already exists), but it's still generating the report. I added this line to the JS, and it didn't change anything http.setRequestHeader('Access-Control-Allow-Origin', '*');

Request URL:
http://ourserver.com/PDF_Reports/Top_Countries/Location_Forecast_Report.pdf
Request Method:
OPTIONS
Status Code:
200 OK
Remote Address:
173.164.26.221:80
Referrer Policy:
no-referrer-when-downgrade

Response Headersview source
1. Allow:
  OPTIONS, TRACE, GET, HEAD, POST
2. Content-Length:
  0
3. Date:
  Mon, 06 Nov 2017 21:46:20 GMT
4. Public:
  OPTIONS, TRACE, GET, HEAD, POST
5. Server:
  Microsoft-IIS/8.5
6. X-Powered-By:
  ASP.NET
Request Headersview source
1. Accept:
  */*
2. Accept-Encoding:
  gzip, deflate
3. Accept-Language:
  en-US,en;q=0.8
4. Access-Control-Request-Headers:
  access-control-allow-headers,access-control-allow-origin
5. Access-Control-Request-Method:
  HEAD
6. Connection:
  keep-alive
7. Host:
  ourserver.com
8. Origin:
  null
9. User-Agent:
  Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Re: No 'Access-Control-Allow-Origin' HELP!!

katahV — Tue, 07 Nov 2017 10:11:43 GMT

If your server and client are on the same machine... I cannot understand.
Are you running the application from outside, for example your machine?
Please, check the following:

Open the browser without web security
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
Check if the application runs without problem

BTW: double check that esriConfig.defaults.io.corsEnabledServers.push("ourserver.com") is include in your code after the changes you did.

Re: No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Tue, 07 Nov 2017 15:01:41 GMT

I have the same issues whether I test this in the browser on the server machine or a browser on another machine. I opened Chrome without web security. I didn't get any errors, but it is still not finding the existing report and returning it. I uncommented esriConfig.defaults.io.corsEnabledServers.push("ourserver.com") and nothing changed. I'm still getting the error "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." What I don't understand is why it needs an Access-Control-Allow-Origin header on an existing element on our web server (the PDF), but it has no problem returning the new PDF that is generated on the same server?

Re: No 'Access-Control-Allow-Origin' HELP!!

katahV — Sat, 11 Dec 2021 17:51:39 GMT

The new PDF generated from ArcGIS Server is accessed through the ArcGIS WebAdaptor (I guess), so it comes with the right header, just because the WebAdaptor was adding the "Access-Control-Allow-Origin" to the header by default. Or the ArcGIS Server itself, doesn't matter.

But the PDF you are providing through "your server" does not write such header.
You have to add the custom header to the endpoint is providing your PDF. If you have a web.config, just add the following statement:

<system.webServer>   
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
  </httpProtocol>
<system.webServer>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I hope it helps.

Re: No 'Access-Control-Allow-Origin' HELP!!

ThomasSolow — Wed, 08 Nov 2017 14:24:03 GMT

It looks like the response header is missing, which makes sense. Adding a header to the request won't help, the header needs to be added by the server as part of the response or the browser will reject the response.

Victor's advice seems to be on the right track to me. In terms of how to add the necessary header I'm pretty clueless, it depends on the server you're using.

I would also note that esriConfig.defaults.io.corsEnabledServers will prevent the request from being sent by the browser if you're using esriRequest, but I don't think it will change anything if you're using XMLHttpRequest.

Re: No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Wed, 08 Nov 2017 14:41:14 GMT

That was one of the first things I tried. It didn't work.

Re: No 'Access-Control-Allow-Origin' HELP!!

katahV — Wed, 08 Nov 2017 15:38:29 GMT

But you got the following message "The 'Access-Control-Allow-Origin' header contains multiple values 'null, *', but only one is allowed. Origin 'null' is therefore not allowed access." because probably the custom header was added from 2 different points.
We need to summarise all the things, if not we'll lost the focus:

Add custom header to the server
Check the response

It it works, congratulations!!
If fails and response is "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." I'll start to be crazy at least you're using IE9.
If fails and response is "The 'Access-Control-Allow-Origin' header contains multiple values 'null, *', but only one is allowed. Origin 'null' is therefore not allowed access." there is at least one more component which is adding the custom header. Probably in the JS code or at a higher level on the server.

Re: No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Sat, 11 Dec 2021 17:51:42 GMT

I added the custom header to the server (IIS 8 Manager > default website > HTTP response headers). I still get "The 'Access-Control-Allow-Origin' header contains multiple values 'null, *', but only one is allowed. Origin 'null' is therefore not allowed access." I removed the custom header from every web.config file I could find (There are three: C://webroot/DotNet/Web.config, C://webroot/resource-proxy-master/DotNet/Web.config, C://webroot/arcgis/Web.config). I still get the error. The only thing that works is the public JS CORS API I found at cors-anywhere.herokuapp.com. That server is not always available, though. I need to get this figured out before our website is live. Should I contact ESRI support?

Here is the CORS anywhere function. Could I set something like this up on our own server?

               function() {
                    var cors_api_host = 'cors-anywhere.herokuapp.com';
                    var cors_api_url = 'https://' + cors_api_host + '/';
                    var slice = [].slice;
                    var origin = window.location.protocol + '//' + window.location.host;
                    var open = XMLHttpRequest.prototype.open;
                    XMLHttpRequest.prototype.open = function() {
                    var args = slice.call(arguments);
                    var targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);
                    if (targetOrigin && targetOrigin[0].toLowerCase() !== origin &&
                    targetOrigin[1] !== cors_api_host) {
                    args[1] = cors_api_url + args[1];
                    }
                    return open.apply(this, args);
                    };
                    })();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Wed, 08 Nov 2017 17:52:04 GMT

I think I just figured it out. The arcgis server under our default site in IIS had the custom header, even though I had commented it out in the arcgis Web.config file! I removed the custom header from there and added it to the default site, and I'm not getting any errors. I'll keep testing but I think it works.

Re: No 'Access-Control-Allow-Origin' HELP!!

ER_Michigan — Mon, 09 Jul 2018 19:49:31 GMT

I'm thinking your solution might be something we want to try with our similar issue, but I just wanted to clarify something: Is "arcgis" the name of your web adaptor? I'm still learning by feel when it comes to IIS and CORS and the whole nine yards.

Re: No 'Access-Control-Allow-Origin' HELP!!

deleted-user-1_r2dgYuILKY — Mon, 09 Jul 2018 20:04:19 GMT

Yes, the default web adapter that's created during the ArcGIS Web Adapter install is called "arcgis." You can name it whatever you want to.

Re: No 'Access-Control-Allow-Origin' HELP!!

AdrianMarsden — Fri, 08 Nov 2019 15:56:54 GMT

OK - I'm getting this AGAIN - EVERY. SINGLE. TIME I move AGS servers I get this. Every time I battle for days trying to sort it. I am fed up with it. i hate it. This thread may have an answer, but not on a Friday afternoon