React 无法使用 Fetch API 下载数据 [重复]

Posted 2023-03-04

【中文标题】React 无法使用 Fetch API 下载数据 [重复]

【英文标题】：React cannot download data using Fetch API [duplicate]

【发布时间】：2021-04-08 08:12:35

【问题描述】：

我正在尝试使用 react 应用从我的 rest api 下载数据。代码适用于本网站 https://pusher.com/tutorials/consume-restful-api-react 上示例中的 url，但当我将 url 更改为本地后端应用程序时不起作用。

我的代码：

fetch("http://localhost:8080/AppRest/appController/getData?ID=1")
        .then(res => res.json())
        .then((data) => 
          alert(data)
          this.setState( icos: data )
        )
        .catch(console.log)

我在网络浏览器控制台中的错误：

[Error] Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
[Error] Fetch API cannot load http://localhost:8080/AppRest/appController/getData?ID=1 due to access control checks.
[Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. (getIcos, line 0)
[Log] TypeError: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

我测试了 api，当我从 url http://localhost:8080/AppRest/appController/getData?ID=1 打开页面时，它会打印 json。

以下是来自后端应用程序的响应标头。当我从网络浏览器连接到 rest 时，我可以下载这个。

HTTP/1.1 200 OK
Content-Length: 65
Content-Type: application/json
X-Frame-Options: SAMEORIGIN
X-Powered-By: Servlet/4.0 JSP/2.3 (Payara Server 5.2020.7 #badassfish Java/Oracle Corporation/1.8)
Server: Payara Server 5.2020.7 #badassfish

【问题讨论】：

这是一个CORS 问题，正如错误提示的那样，因此您需要允许服务器端的http://localhost:3000 能够从您的本地开发环境进行调用。

我是否需要更改一些 int 后端或我的 react 应用程序？对不起，我从昨天开始学习反应。 cors 对我来说是新事物。

我尝试使用 mode: 'no-cors' 但无法从响应中获取 json，响应状态为 0。

这必须在后端完成，在客户端设置no-cors (React) 不会有什么不同。查看来自API 请求的响应标头，它们应该告诉您哪些origins 是允许的，例如Access-Control-Allow-Origin: https://example.com

【参考方案1】：

尝试指定请求选项

let url = "http://localhost:8080/AppRest/appController/getData?ID=1";
let reqOptions = 
    method: "GET"


fetch(url, reqOptions)
    .then(response => 
        if (!response.ok) 
            console.log(response.statusText);
        
        return response.json();
    )
    .then(data => 
        return data;      
    ).catch(err => console.log(err));

【讨论】：

这是一个需要在服务器端处理的CORS 问题，不知道为什么将选项传递给fetch 调用会有所帮助。