本地React前端调用AWS部署的Node.js Express服务器遇CORS问题求助

我搭建了一个Node.js Express服务器，用于通过API向前端返回JSON数据，已将后端部署至AWS服务器。当前开发React前端时，在localhost:3000启动React并向AWS服务器发起请求，遭遇CORS错误，提示localhost:3000未被授权访问该服务器。报错信息如下：

Access to fetch at 'http://www.myawssever.fr:4000/api-url/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我尝试过多种方法授权localhost:3000，但认为问题根源不在此——对服务器而言，localhost:3000就是自身地址？请问如何在本地（React运行于localhost:3000）测试部署在AWS上的后端？

1. 正确配置Express的CORS中间件 #

你误解了“localhost是服务器自身地址”：你的React运行在本地电脑，AWS服务器是远程机器，两者属于完全不同的origin，必须在Express后端明确允许http://localhost:3000。

• 安装cors包：

  npm install cors
  

• 在Express入口文件中配置：

  const cors = require('cors');
  const express = require('express');
  const app = express();
  
  // 允许localhost:3000发起跨域请求
  app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true // 若请求需要携带Cookie或认证信息则添加
  }));
  
  // 后续路由、中间件配置...
  

• 如需临时支持多个origin，可改为数组形式：

  origin: ['http://localhost:3000', 'https://your-production-domain.com']
  

2. 配置React代理转发请求（无需修改后端） #

若不想修改后端CORS配置，或后端暂时无法调整，可在React项目中设置代理，让本地开发服务器自动转发请求至AWS后端：

• 在React项目的package.json中添加一行：

  "proxy": "http://www.myawssever.fr:4000"
  

• 将React中的请求路径改为相对路径，比如原请求http://www.myawssever.fr:4000/api-url/改为/api-url/
• 重启React开发服务器，此时请求会通过localhost:3000转发至AWS后端，避开CORS限制

3. 检查AWS服务器的安全组/防火墙设置 #

确保AWS服务器的安全组已开放4000端口，允许你的本地IP访问（或临时允许所有IP用于测试）。若端口未开放，即便CORS配置正确，请求也会被拦截。

4. 禁用no-cors模式（不推荐） #

报错中提到的mode: 'no-cors'会让请求变为不透明响应，无法读取返回的JSON数据，仅适用于获取静态资源，对API请求毫无价值，请勿使用此方法。

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