Home > database >  No 'Access-Control-Allow-Origin' header when fetch data with REACT from API
No 'Access-Control-Allow-Origin' header when fetch data with REACT from API

Time:11-08

I have an urgent problem I hope you can help me as soon as possible.

I have a test to get products from a company API.

They told me ((( CORS allowed origins for local development is "http://localhost:1229" ))).

So I set up proxy in package.json like this:

"proxy": "http://localhost:1229",

And my request is :

const apiLink = 'https://example.com/api/checkout/products/';

    fetch(apiLink, {
        method: 'POST'
    }).then(returnedData => {
        console.log(returnedData)
    }).catch(error => {
        console.log(error)
    });

But I still get this error

Access to fetch at 'https://...' from origin 'http://localhost:3000' has been blocked by CORS policy: 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

please how can i solve this problem.

CodePudding user response:

CORS allow get content from origin http://localhost:1229 so, try run development server on http://localhost:1229

using command on linux
PORT=1229 react-scripts start
on windows
set PORT=1229 && react-scripts start

or change package.json
"start": "PORT=1229 react-scripts start"
"start": "set PORT=1229 && react-scripts start"

  • Related