CORS issue in React js

Question

I am using React js in front end and webApi (c#) for service side. Initially i got issue with CORS while trying to get data from db and then i have added the below lines in web.config file then the issue got resolved. I am able to get data from web api.

<customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type,Origin,Accept" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>

But now i am trying to post data, that is sending data from react js to web api, it is throwing the same cors error. please find the below lines from react js

fetch(url, {
    method: 'POST',
    mode:'cors',
    // body: JSON.stringify(data),
    // headers :{
    //   'Content-Type': 'application/json',
    //   'Access-Control-Allow-Origin':'*'
    // },
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin':'*',
      'Access-Control-Allow-Headers':'Origin,Content-Type,Accept',

    }
  });

Is there anything i am missing. I dont understand why it is working for getting data and not for posting data. Any one can help me on this? Thanks in advance.

Please try to use Axios library instead of fetch. For example, axios.get('some url') — TopW3
– TopW3, Commented Dec 3, 2019 at 18:39
@TopW3 Thank you for the solution. i ll try it but my question is why it is working for get data from api not for posting data.? — Sat
– Sat, Commented Dec 3, 2019 at 18:57
I guess it is the problem of back-end. Please refer this page: expressjs.com/en/resources/middleware/cors.html — TopW3
– TopW3, Commented Dec 3, 2019 at 19:02
@Arkerone Failed to load resource: the server responded with a status of 405 (Method Not Allowed) Access to fetch at 'the url' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. asyncToGenerator.js:6 Uncaught (in promise) TypeError: Failed to fetch — Sat
– Sat, Commented Dec 3, 2019 at 19:04

Sat · Accepted Answer · 2019-12-06 06:25:46Z

1

i have installed Microsoft.AspNet.WebApi.Cors dll and the cors issue got resolved. Thanks all.

answered Dec 6, 2019 at 6:25

Sat

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sabesan · Accepted Answer · 2019-12-03 21:07:26Z

0

I faced the smiler issue when I fetch the data from medium.com. In there the CROS issue happened by RSS feed. if you fetch the RES feed data from backend then use RSStoJSON api. To get https://rss2json.com/#rss_url=http%3A%2F%2Ffeeds.twit.tv%2Fbrickhouse.xml

To post use this dependency in your project https://www.npmjs.com/package/jsonfeed-to-rss

But I followed those mechanisms

I couldn’t exactly say this problem is same as your problem. If you mentioned that error it’s easy to answer for me

answered Dec 3, 2019 at 21:07

Sabesan

7121 gold badge10 silver badges17 bronze badges

1 Comment

Sat Over a year ago

Error message:

Failed to load resource: the server responded with a status of 405 (Method Not Allowed) Access to fetch at 'the url' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. asyncToGenerator.js:6 Uncaught (in promise) TypeError: Failed to fetch

Collectives™ on Stack Overflow

CORS issue in React js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related