React JS - 请求的资源上不存在“Access-Control-Allow-Origin”标头。跨域资源错误

Posted 2023-02-22

【中文标题】React JS - 请求的资源上不存在“Access-Control-Allow-Origin”标头。跨域资源错误

【英文标题】：React JS - No 'Access-Control-Allow-Origin' header is present on the requested resource. Cross Origin Resource Error

【发布时间】：2019-08-01 11:48:22

【问题描述】：

我在 React Web 应用程序中使用 Fetch 进行 API 调用（在另一个域上运行）。我收到错误跟随错误。

访问获取 来自源“http://localhost:3000”的“--------API URL------”已被 CORS 策略阻止： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以获取禁用 CORS 的资源。

我还在 *** 上阅读了几个关于同一问题的答案，标题为“Access-Control-Allow-Origin”，但仍然无法弄清楚如何解决这个问题。我不想在 Chrome 中使用扩展程序或使用临时 hack 来解决这个问题。请提出解决上述问题的标准方法。

我的代码如下所示。

        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);
        );

    

【问题讨论】：

简而言之：您尝试访问不同的 url（在您的情况下是具有不同端口的 localhost），然后是为您的 react 应用程序提供服务的 url。您可以通过更改服务器端代码来解决此问题，以同时为应用程序提供服务并侦听 API 请求。

【参考方案1】：

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);
  ); 

从这里找到：No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API