close

[Solved] Access to fetch at from origin ‘http://localhost:3000’ has been blocked by CORS policy

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Access to fetch at from origin ‘http://localhost:3000’ has been blocked by CORS policy in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve Access to fetch at from origin ‘http://localhost:3000’ has been blocked by CORS policy Error ?

  1. How To Solve Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy Error?

    To Solve Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy Error For browser, CORS is enabled by default and you need to tell the Browser it's ok to send a request to the server that has not served your client-side app ( static files ).

  2. Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy

    To Solve Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy Error For browser, CORS is enabled by default and you need to tell the Browser it's ok to send a request to the server that has not served your client-side app ( static files ).

Solution 1

try using ”no-cors’ mode. Here is example.

fetch('http://localhost:8080/example', {
            mode: 'no-cors',
            method: "post",
            headers: {
                 "Content-Type": "application/json"
            },
            body: JSON.stringify(ob)
 })

Solution 2

Your server should respond with a response that looks like below

Access-Control-Allow-Origin: https://localhost:3000

Until you are able to configure that as a workaround you can install the below chrome extension to resume your testing

Solution 3

For browser, CORS is enabled by default and you need to tell the Browser it’s ok to send a request to the server that has not served your client-side app ( static files ).

if you use RestFul API with node and express add this middleware to your file

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*")
}) 

Solution 4

The middleware should be like this.

app.use((req, res, next) => {
  res.header({"Access-Control-Allow-Origin": "*"});
  next();
}) 

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment