React无法从公共端点获取JSON数据，求排查解决方法

问题原因 #

这个错误几乎可以确定是**浏览器的同源策略（CORS跨域限制）**导致的：

• 浏览器会限制前端脚本从不同域名的服务器获取资源，除非目标服务器返回了允许跨域的响应头。
• Postman、直接在浏览器地址栏访问这类方式不受同源策略约束，所以能正常拿到数据。

解决方案 #

根据你的场景，推荐以下几种处理方式：

1. 本地开发用React代理（最方便） #

在React项目的package.json中添加代理配置，让开发服务器帮你转发请求，绕过CORS限制：

{
  "proxy": "https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com"
}

然后修改代码中的请求路径为相对路径，并添加错误捕获逻辑：

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

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

  useEffect(() => {
    (async () => {
      try {
        const response = await fetch("/dev/conferences/GetDigital2023/Lectures");
        // 检查响应状态是否正常
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }
        const parsed = await response.json();
        setData(parsed);
      } catch (err) {
        setError(err.message);
      }
    })();
  }, []);

  if (error) {
    return <div>请求出错：{error}</div>;
  }

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

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

2. 配置API服务器的CORS响应头 #

如果你有权限修改目标API服务器的配置，直接在服务器端添加CORS允许的响应头：

• 添加Access-Control-Allow-Origin头，值设为你的React应用域名（比如http://localhost:3000），开发环境可以临时用*（允许所有域名访问，生产环境不建议）。
• 具体配置方式取决于你的服务器技术栈，可对应查找框架的CORS配置文档。

3. 使用第三方CORS代理（临时应急，不推荐生产环境） #

如果以上两种方式都无法实现，可以用第三方CORS代理服务转发请求，比如：

const response = await fetch("https://cors-anywhere.herokuapp.com/https://phmwu2mdn6.execute-api.eu-central-1.amazonaws.com/dev/conferences/GetDigital2023/Lectures");

注意：这类免费代理服务有请求次数限制，且存在安全风险，只适合临时调试。

内容的提问来源于stack exchange，提问作者PJK