Access to fetch `url` been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ReactJS

We Are Going To Discuss About Access to fetch `url` been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ReactJS. So lets Start this Python Article.

Access to fetch `url` been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ReactJS

How to solve Access to fetch `url` been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ReactJS

Install the CORS package in the backend.
Then open your server.js file or whatever is yours.
Then import it to the file
const cors = require('cors');
And then use it
app.use(cors());
reload the browser and should be done!

Access to fetch `url` been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ReactJS

Install the CORS package in the backend.
Then open your server.js file or whatever is yours.
Then import it to the file
const cors = require('cors');
And then use it
app.use(cors());
reload the browser and should be done!

Solution 1

Install the CORS package in the backend.
Then open your server.js file or whatever is yours.
Then import it to the file

const cors = require('cors');

And then use it

app.use(cors());

reload the browser and should be done!

Original Author Atanas Vihrogonov Of This Content

Solution 2

add content-type header to your fetch method in the frontend and try again:

let response = await fetch(url,
       {
           method: 'POST',
           mode: 'cors',
           body: "param=" + paramVar,
           headers: {
             'Content-Type': 'application/json'
       },
  }).then(response => response.json());

Original Author Methkal Khalawi Of This Content

Solution 3

There was actually a bug in the backend that was only triggered by some additional headers added by the browser. In that particular case, the server was returning a 404 error which wouldn’t contain my header definitions and would cause the CORS policy block.

I was only able to identify the bug after I used devtools to track the request sent by the browser and replicated all the headers in my curl request. After fixing the function logic the problem was fixed.

Original Author Methkal Khalawi Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment