Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React JS - No 'Access-Control-Allow-Origin' header is present on the requested resource. Cross Origin Resource Error

I'm making an API call (Running on another domain) using Fetch in a React Web app. I am getting the error Following error.

Access to fetch at '--------API URL---------' 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.

I have also read several answers on Stack Overflow about the same issue, titled "Access-Control-Allow-Origin" but still couldn't figure out how to solve this. I don't want to use an extension IN Chrome or use a temporary hack to solve this. Please suggest the standard way of solving the above issue.

My code looks like this:

{
        return fetch('-----------API URL--------',
        {   method:'GET',
            mode: 'cors',
            headers:{
                'Access-Control-Allow-Origin':'*'
            },
        })
        .then((response) => response.json())
        .then((responseJson) => {
            console.log(responseJson.ALLORDERSRX);
            this.setState({
                isLoading: false,
                dataSource: responseJson.ALLORDERSRX,
            }, function(){
                
            });
        })
        .catch((error) =>{
            console.error(error);
        });

    }
like image 949
Ranjitha R Avatar asked Nov 22 '25 12:11

Ranjitha R


1 Answers

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = 'https://api.liveconnect.in/backend/web/erpsync/get-all-orders?data=dbCode=UAT04M%7Cidx=100%7CuserId=6214%7Cres_format=1'; // site that doesn’t send Access-Control-*
fetch(proxyurl + url).then((resp) => resp.json())
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  }); 

found from here :No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

like image 96
Saurabh Mistry Avatar answered Nov 25 '25 01:11

Saurabh Mistry



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!