Blocked by CORS policy : No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

Hi I am using django rest framework as API service and React as frontend.I can call the api from react when developing and when i deploy to iis.I got this error

No 'Access-Control-Allow-Origin' header is present on the requested resource.

I already do like this say=>CORS Error

but I still got this error.

My Django runs on localhost:81

My react app run on : 192.168.1.32:81

I can run this on local server which both installed but when I try on another computer I got this error.

I used the fiddler 4 for override the port in the hostname.

Answer 1

You could use iis response header:

1)open iis manager and select the site.

2)Double-click HTTP Response Headers from the middle pane.

3)In the actions pane, click Add.

4)In the Name box, type the custom HTTP header name. In the Value box, type the custom HTTP header value.

below is header and value:

Access-Control-Allow-Origin:*

Access-Control-Allow-Headers: Content-Type

Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS

Access-Control-Allow-Credentials: true

5)Click OK.

or you can directly add below code in the web.config file:

<system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="Access-Control-Allow-Headers" value="Content-Type" />
          <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
         <add name="Access-Control-Allow-Credentials" value="true" />
        </customHeaders>
      </httpProtocol>
  </system.webServer>