问题

我是新手React，尝试使用它从一个公开可用的端点获取数据，该端点公开了一个简单的JSON对象。我可以通过浏览器、[Postman][1]等方式访问此端点看到数据。但React一直返回`"Type Error: failed to fetch"`。我做错了什么？

```jsx
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    (async () => {
      const response = await fetch(
        "https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com/dev/conferences/GetDigital2023/Lectures"
      );
      const parsed = await response.json();
      setData(parsed);
    })();
  }, []);

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我需要看到JSON数据，而不是错误消息。

<details>
<summary>英文:</summary>

I&#39;m new to React and I&#39;m trying to use it to fetch data from a publicly available endpoint that exposes a simple JSON object. I can see the data by hitting this endpoint via my browser, via [Postman][1], etc. But React keeps returning `&quot;Type Error: failed to fetch&quot;`. What am I doing wrong?

```jsx
import React, { useState, useEffect } from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;
import &quot;./styles.css&quot;;

function App() {
  const [data, setData] = useState({});

  useEffect(() =&gt; {
    (async () =&gt; {
      const response = await fetch(
        &quot;https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com/dev/conferences/GetDigital2023/Lectures&quot;
      );
      const parsed = await response.json();
      setData(parsed);
    })();
  }, []);

  return (
    &lt;div&gt;
      &lt;pre&gt;{JSON.stringify(data, null, 2)}&lt;/pre&gt;
    &lt;/div&gt;
  );
}

const rootElement = document.getElementById(&quot;root&quot;);
ReactDOM.render(&lt;App /&gt;, rootElement);

I need to see the JSON data, not the error message.

答案1

得分: -2

你遇到的错误表明存在跨源资源共享（CORS）策略问题。当你尝试从与服务器不同的源发起 AJAX 请求（在你的情况下使用 fetch 函数）时，就会出现这个问题。

在你的代码中，你正在从 http://localhost:3000 的源发起一个 fetch 请求到 https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com/dev/conferences/GetDigital2023/Lectures 的 URL。然而，服务器没有返回所需的 Access-Control-Allow-Origin 标头以允许来自该源的请求。

要解决此问题，你可以尝试以下解决方案：

1. 联系 API 的所有者或服务器开发人员，并要求他们将 Access-Control-Allow-Origin: * 标头添加到响应中。这将允许来自任何源的请求。

2. 如果你可以控制服务器，你可以配置它以在响应中添加 Access-Control-Allow-Origin 标头。如何做这取决于你使用的服务器。例如，如果你使用 Node.js 与 Express，你可以使用 cors 中间件来处理 CORS 权限。

3. 如果无法修改服务器，你可以尝试使用代理来绕过开发期间的CORS策略限制。你可以设置一个本地代理服务器，将应用程序的请求重定向到远程API。这样所有请求看起来都像是从相同的源发出的，从而避免了CORS问题。

要在你的React应用程序中使用代理，可以使用一个叫做 http-proxy-middleware 的包。按照以下步骤设置应用程序中的代理：

1. 使用 npm 或 yarn 安装 http-proxy-middleware 包：

npm install http-proxy-middleware

或

yarn add http-proxy-middleware

2. 在项目文件夹中，创建一个名为 setupProxy.js（确切的名称很重要）的文件，放在 package.json 文件旁边。

3. 在 setupProxy.js 中，你可以配置代理以将请求重定向到远程API。例如，如果你想要将所有以 /api 开头的请求重定向到 https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com，你可以使用以下代码：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com',
      changeOrigin: true,
    })
  );
};

4. 确保你的React应用程序在开发模式下运行（npm start 或 yarn start）。当你运行应用程序时，代理将被设置，对 /api 的请求将被重定向到远程API。

现在，在你的React代码中，你可以使用相对URL /api 发起请求。例如：

(async () => {
      const response = await fetch(
        "/api/dev/conferences/GetDigital2023/Lectures"
      );
      const parsed = await response.json();
      setData(parsed);
 })();

使用这个代理配置，所有以 /api 开头的请求将被重定向到 https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com。请确保将 https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com 替换为你的远程API的实际URL。

这种方法有助于在开发过程中绕过CORS问题，但请记住，在生产环境中部署应用程序时要考虑CORS限制。

npm install http-proxy-middleware

yarn add http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com',
      changeOrigin: true,
    })
  );
};

(async () => {
      const response = await fetch(
        "/api/dev/conferences/GetDigital2023/Lectures"
      );
      const parsed = await response.json();
      setData(parsed);
 })();