从外部api获取数据时反应应用程序中的Cors错误[重复]

Posted 2023-02-22

【中文标题】从外部api获取数据时反应应用程序中的Cors错误[重复]

【英文标题】：Cors error in react app when fetching data from external api [duplicate]

【发布时间】：2020-11-20 22:31:59

【问题描述】：

对跨域请求共享的主题进行了大量研究，并尝试了很多修复，但似乎没有什么对我有用。目前我一直在通过代理服务器传递我的 api 请求来避免错误，方法是在我的 url 前面附加“https://cors-anywhere.herokuapp.com/”，但这似乎是一个不太理想的解决方法而不是实际的解决方案。

我得到的错误是：

从源“http://localhost:3000”访问“https://usgeocoder.com/api/get_info.php?address=498 Castro st&zipcode=94114&authkey=1674f5de56e81f040a01afcf07e6ab69&format=json”已被 CORS 阻止策略：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。 api.js:6 GET https://usgeocoder.com/api/get_info.php?address=498Castro st%20st&zipcode=94114&authkey=1674f5de56e81f040a01afcf07e6ab69&format=json net::ERR_FAILED

我知道我无法从客户端更改 Access-Control-Allow-Origin 标头，但我想制作自己的代理（我知道我可以通过克隆“cors-anywhere”git repo 并托管它来做到这一点我自己在heroku上，但这似乎仍然很粗略）或以更贴近的方式通过cors。这是我的整个 api.js 文件，它为我的主 App.js 反应文件获取数据：

export const getInfo = async (address, zip) => 
    const url = `https://usgeocoder.com/api/get_info.php?address=$address&zipcode=$zip&authkey=1674f5de56e81f040a01afcf07e6ab69&format=json`;
    const response = await fetch(url);
    const json = await response.json();
    return json;

提前感谢您，如果我能提供更多有助于回答我的问题的信息，请告诉我。

p.s 我知道还有其他类似的问题，但我已经尝试了几个小时和几天来解决这个问题，但似乎没有一个对我有用

【问题讨论】：

尝试在你的 package.json 文件中添加这一行，"proxy": "usgeocoder.com"

这对我不起作用）：

实际且唯一的解决方案实际上是使用某种代理——至少只要您想从在浏览器中运行的前端 javascript 发出请求。另一种方法是从后端服务器端代码发出请求。

非常感谢。终于解决了这个问题。我需要更多地研究前端和后端实际上是什么，最终使用 express 从后端服务器端代码发出我的 api 请求并将其发送到我的反应前端

【参考方案1】：

如果这是一个开放的 API，试试这个：

export const getInfo = async (address, zip) => 
    const url = `https://usgeocoder.com/api/get_info.php?address=$address&zipcode=$zip&authkey=1674f5de56e81f040a01afcf07e6ab69&format=json`;
    const options = 
        method: 'GET'
        mode: 'no-cors'
    ;
    const response = await fetch(url, options);
    const json = await response.json();
    return json;

【讨论】：

这会导致“意外结束输入”错误，大概是因为它不是开放的 api 并且不透明的响应是不够的。

在那种情况下，@sideshowbarker 在 cmets 中给了你一个准确的答案。