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

Question

Adding to the database shows the error. what should I do?

Access to fetch at 'http:xxx' from origin 'http://localhost:3000' 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.

my function:

addItem = (e) => {
    e.preventDefault();
    const ob = {
        X: 53.0331258,
        Y: 18.7155611,
    }
    fetch("http://xxx", {
            method: "post",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(ob)
        })
        .then(res => res.json())
        .then(res => {
            console.log(res);
        })
}

Answer 1

try using ''no-cors' mode.

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

Answer 2

Your server should respond with a response that looks like below

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

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

https://chrome.google.com/webstore/detail/who-cors/hnlimanpjeeomjnpdglldcnpkppmndbp?hl=en-GB

But the above is only a workaround to continue development

I would suggest you read this article for understanding CORS https://javascript.info/fetch-crossorigin

Answer 3

I resolved the issue by installing the cors node module and adding this on the requested server

const cors = require("cors");
app.use(cors());

Answer 4

You must install cors.

npm install cors

inside the main scripts index.js or app.js

const cors = require("cors");
app.use(cors());

Answer 5

For browser CORS is enabled by default and you need to tell the Browser it's ok for send a request to server that 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", "*")
}) 

Answer 6

Try using the following code:

var corsOptions = {
  origin: "http://localhost:3000"
};

app.use(cors(corsOptions));

You should copy in server.js(or app.js)

(I've experienced the exact same problem as this one. I was able to solve the problem by adding the following code to server.js.)

Answer 7

Simplest solution: Got this from AWS docs

1. In you lambda function's code
2. Add this in your function that returns a response

function buildResponse(statusCode, body) {
    return {
        statusCode: statusCode,
        headers: {
             "Access-Control-Allow-Headers" : "Content-Type",
              "Access-Control-Allow-Origin": "*",
            'Content-Type': 'application/json',
             "Access-Control-Allow-Methods": "OPTIONS,POST,GET,PATCH"
        },
        body: JSON.stringify(body),
    };
}

Answer 8

solution 1: if you are using spring boot at the backend try using cross orgin annotation while handling post and get requests.

@CrossOrigin(origins = "http://localhost:3000")

solution 2: Try removing web security dependency in your backend, or you can pass username and password in the header, as shown below

useEffect(() => {
    // Replace with your API endpoint
    const apiUrl = 'https://your-backend-api-url.com/data';

    // Replace with your Basic Authentication credentials
    const username = 'your-username';
    const password = 'your-password';
    const basicAuthHeader = 'Basic ' + btoa(username + ':' + password);

    fetch(apiUrl, {
      method: 'GET',
      headers: {
        'Authorization': basicAuthHeader
      }
    })
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

i hope this solves your problem.

Answer 9

The middleware should be like this.

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

Answer 10

const cors = require("cors"); app.use(cors());

i use this but can't solve this problem.

app.use((req, res, next) => { res.header({"Access-Control-Allow-Origin": "*"}); next(); }) when use this code than solve this problem

Answer 11

try to add annotation @CrossOrigin , its worked for me .

@RestController @RequestMapping(value="") @CrossOrigin

Answer 12

In WordPress version 6 I solved the issue by using the mode option available in fetch api here

apiFetch( { mode: 'no-cors', url: 'https://api.example.com/?q=' + attributes.search_string } ).then( ( posts ) => {
                console.log( posts );
            } );

Answer 13

Actually it's more efficient to fix this bug from the server side like this:

npm install cors

inside the post operation:

app.post("/...", (req, res) =>{
  res.set('Access-Control-Allow-Origin', '*');
//whatever you want here
}

you can read this article https://www.stackhawk.com/blog/react-cors-guide-what-it-is-and-how-to-enable-it/#enable-cors-on-server-side

OR you can easily convert the client side to work on the same domain with the server side by adding in the package.json (client side)"proxy" of the server domain like this:

"proxy": "http://xxxx/"

in this case you don't have to add the domain name in each request anymore.

and the last solution "it's not recommended" by adding {"mode": "no-cors"} to your request.

Answer 14

In case you are getting this on content of a AWS S3 bucket, Go to Bucket -> Permissions -> CORS from the AWS S3 Console and add the following:

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Be careful of the consequences though - this will allow the content to be hosted within any website. You can add other methods if you need to like POST,PATCH in addition to the GET

Answer 15

make a new variable called header:

const header = new Headers({ "Access-Control-Allow-Origin": "*" });

pass this variable as an object in fetch:

fetch(url, { header: header })
      .then((res) => res.json())
      .then((data) => console.log(data));

This will resolve the issue