React项目Fetch API请求：无法访问返回JSON数据问题求助

看起来你碰到了跨域请求里典型的两难困境——要么拿不到响应内容，要么直接触发403错误。我来帮你拆解问题根源，再给出可行的解决方案：

为什么会出现这两种情况？ #

• no-cors模式的opaque响应：当你使用no-cors模式时，浏览器会严格执行同源策略，哪怕服务器返回了数据，也会把响应标记为「不透明（opaque）」，完全禁止JavaScript访问响应内容。开发者工具能看到数据是因为浏览器自身接收到了，但出于安全限制，不会把数据交给你的代码。
• cors模式的403错误：这个错误说明目标服务器没有配置正确的CORS（跨域资源共享）响应头。虽然浏览器确实收到了服务器返回的数据，但在CORS校验失败后，会直接拦截响应，不让你的代码读取——这就是为什么你能在开发者工具里看到数据，但代码拿不到的核心原因。

可行的解决方案 #

1. 优先让服务器端配置CORS（最推荐） #

这是解决跨域问题的根本方案，你需要联系后端开发人员，在API的响应头中添加以下配置：

• Access-Control-Allow-Origin: 你的React站点域名（比如https://your-react-app.com，生产环境不要用*，避免安全风险）
• 如果请求包含自定义头或特定方法，还需要添加Access-Control-Allow-Methods: GET（以及其他需要的请求方法）和Access-Control-Allow-Headers（对应你请求里的自定义头）

配置完成后，你直接用cors模式发起Fetch请求，就能正常访问JSON数据了。

2. 本地开发用React代理绕过跨域 #

如果暂时没法修改服务器配置，本地开发时可以用React内置的代理功能：

1. 安装代理依赖：

npm install http-proxy-middleware --save-dev

2. 在项目的src目录下创建setupProxy.js文件，添加以下代码：

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

module.exports = function(app) {
  app.use(
    '/api', // 替换成你的API请求前缀
    createProxyMiddleware({
      target: 'https://目标API的域名.com', // 替换成实际的API地址
      changeOrigin: true, // 必须设置为true，确保请求头的Host正确
    })
  );
};

3. 修改你的Fetch请求地址，比如原来的https://目标API的域名.com/api/data改成/api/data，这样本地开发时请求会先经过React的开发服务器转发，避免跨域问题。

3. 生产环境用反向代理（比如Nginx） #

如果你的React项目部署在Nginx上，可以通过反向代理让前端和API使用同域名，彻底解决跨域：
在Nginx的配置文件中添加如下规则：

location /api {
    proxy_pass https://目标API的域名.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

这样前端请求/api/data时，Nginx会自动转发到目标API，因为是同域名请求，不会触发跨域限制。

重要提醒 #

不要再使用no-cors模式了——它的设计目的是让你发起请求但不读取响应（比如加载第三方资源），完全满足不了你需要获取并展示JSON数据的需求。

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