Otdfbt

We have a ERP application (Epicor) which provides a REST interface sitting inside of an II 8.5 (win server 2012R2).

No problem doing POST/GET etc using Insomina (a desktop program similar to PostMan)

In IIS we have enabled only Anonymous Authentication.

However, the below request is getting a 401 Error and is blocking because of CORS (even though it has 'Access-Control-Allow-Origin':'*', )

We are using Chrome V74

 const fetcher = (async () => 
 const url = 'https://epicorapp2.draper.com/ERP10.1Test/api/v1/Erp.BO.JobEntrySvc/GetNextJobNum'
 const raw = fetch(url, 
 method: 'POST',
 mode: 'cors',
 headers: 
 'Accept': 'application/json',
 'Authorization': 'Basic xxxxxxx=',
 'Access-Control-Allow-Origin':'*',
 'Content-Type': 'application/json'
 ,
 body: JSON.stringify()
 )
 console.log(raw)
 const nJob = await raw.json()
 console.log(nJob)
 return nJob
 )

Here is the error:

VM1115:1 OPTIONS https://epicorapp2.draper.com/ERP10.1Test/api/v1/Erp.BO.JobEntrySvc/GetNextJobNum 401 (Forbidden)

dispatchInteractiveEvent @ Main.7485fc72.js:8458
Main.html:1 Access to fetch at 'https://epicorapp2.draper.com/ERP10.1Test/api/v1/Erp.BO.JobEntrySvc/GetNextJobNum' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

What settings should we be using on IIS to allow the CORS request to go through?

UPDATE

We got I.T. to add the cors module, and I updated the the section of the web.config but I am still getting an CORS error. Can you tell me what is wrong here?

<httpProtocol>
 <customHeaders>
 <add name="Access-Control-Allow-Origin" value="*" />
 </customHeaders>
</httpProtocol>
<cors enabled="true" failUnlistedOrigins="false">
</cors>

This is the error:

`Access to fetch at 'https://epicorapp2.draper.com/ERP10.1Test/api/v1/Erp.BO.JobEntrySvc/GetNextJobNum' from origin 'http://ysg4206.draper.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.`

So you have a couple of problems

The first is that your request is not returning a HTTP 200 OK status (the system your calling). this is a problem with the fetch API it does not support any none 200 status code responses. (fix is to switch to using XMLHttpRequest commonly known as AJAX), you can test this using an application such as Advanced Rest Client and making the request from in there to see what status code it is giving back.

The second you need to tell it GET & OPTIONS requests are allowed with access-control-allow-methods:GET,OPTIONS header. (OPTIONS is what the CORS check uses to do its checks)

The third problem is that your no longer allowed to use the * as a valid Origin you have to supply the origin of the calling system, in this case, the site running the javascript. so this would require your 'IT Department' to engineer the code to use the referer header to know the host and port they need to supply in that header it can be done by a web.config file if they are able to hard code the hostname and port of the calling site.

<httpProtocol>
 <customHeaders>
 <add name="Access-Control-Allow-Origin" value="example.com,example.com:8080" />
 <add name="Access-Control-Allow-Method" value="GET, OPTIONS" />
 </customHeaders>
</httpProtocol>

The example above shows both using a standard port of 80 or HTTPS port of 443, and an example of a custom port of 8080

The fourth problem is that the CORS headers are not sent by Javascript I slightly covered this in the third point but your Javascript should not send the headers and to do so will do nothing. The server or website your connecting to has to send the headers as you enabling of the CORS module shows you.