Ad

React JS - No 'Access-Control-Allow-Origin' Header Is Present On The Requested Resource. Cross Origin Resource Error

- 1 answer

Im 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 StackOverflow 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);
        });

    }
Ad

Answer

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

Ad
source: stackoverflow.com
Ad