CORS error on API call from SPFX web part

James_Evans

Hey,

I'm trying to create a client side SharePoint web part. Just to show the users work item request. I'm having issues with CORS from the Cireson API. I keep getting a No 'Access-Control-Allow-Orgin' header error. The request works in Postman. its just when I try to run it from the VSCode debugger I get this error. Any help or advice would be appreciated.

Error:

Access to fetch at '/api/V3/Authorization/GetToken?' from origin 'https://localhost:4321' 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.

Code:

var myHeaders = new Headers();

myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({

  "username": "XXXXX",

  "Password": "XXXXXXXX",

  "LanguageCode": "ENU"

});

var requestOptions = {

  method: 'POST',

  headers: myHeaders,

  body: raw,

  redirect: 'follow'

};

fetch("https://<domain>/api/V3/Authorization/GetToken?", requestOptions)

  .then(response => response.text())

  .then(result => console.log(result))

  .catch(error => console.log('error', error));

Thorsten_Mewes

Hi @James_Evans ,

did you find a solution for your CORS problem?

We are trying the same api call and get the same error. I think that CORS has to be enabled on IIS side, but I am unsure what to to.

Can you help us out? Any help appreciated.

Best regards, Thorsten

Justin_Workman

@Thorsten_Mewes is correct. You need to add a response header in IIS. In IIS, go to the Cireson Portal website then to HTTP Response Headers and add a new one:

Bear in mind, that using the * will allow any host to make requests like this to your site. You can specify the site where the requests will be coming from if you want it to be more secure.

Thorsten_Mewes

Thanks @Justin_Workman for sharing :-)

We did investigated a little further on the cors issue and found a MS solution for this using the IIS CORS module: IIS CORS Module : The Official Microsoft IIS Site

This is what we added to web.config:

    <cors enabled="true">

      <add origin="<prod-url>"

          allowCredentials="true"

          maxAge="120">

        <allowHeaders allowAllRequestedHeaders="true">

        </allowHeaders>

        <allowMethods>

          <add method="POST" />

          <add method="GET" />

        </allowMethods>

      </add>

      <add origin="dev-url"

          allowCredentials="true"

          maxAge="120">

        <allowHeaders allowAllRequestedHeaders="true">

        </allowHeaders>

        <allowMethods>

          <add method="POST" />

          <add method="GET" />

        </allowMethods>

      </add>      

    </cors>

Not perfectly finished config but it works fine now with cireson api from our localhost dev env as well from prod iis server.

Best regards, Thorsten