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

[deleted-user-1_r2dgYuILKY]

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. 

[katahV]

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.

1. Are the ArcGIS Server and the Client on the same machine? Are they on the same domain?
2. 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.
3. Do you use a client wrote using ArcGIS-JS-API or it is on top of WebApp Builder?
   

[deleted-user-1_r2dgYuILKY]

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);
                    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[ThomasSolow]

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.

[deleted-user-1_r2dgYuILKY]

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?

[ThomasSolow]

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);
                     ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[deleted-user-1_r2dgYuILKY]

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.

[ThomasSolow]

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.

[deleted-user-1_r2dgYuILKY]

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', '*'); 

1. Request URL:
   http://ourserver.com/PDF_Reports/Top_Countries/Location_Forecast_Report.pdf
2. Request Method:
   OPTIONS
3. Status Code:
   200 OK
4. Remote Address:
   173.164.26.221:80
5. Referrer Policy:
   no-referrer-when-downgrade
1. 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
2. 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

[ThomasSolow]

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.