Express.js配置CORS后跨服务器访问React客户端接口报错如何解决

1. 前端请求地址配置错误：React属于前端应用，代码会加载到访问者的本地浏览器中运行，如果你在前端代码里把API请求地址写为http://localhost:3001，访问者打开页面时会向自己设备的本地3001端口发起请求，而非指向部署API服务的Windows服务器，自然无法获取数据。
2. Express服务绑定地址限制：如果你的Express服务启动时只监听了localhost（127.0.0.1）回环地址，那只有部署服务的本机可以访问该API，局域网其他设备的请求无法被服务接收。
3. Windows防火墙拦截：Windows服务器默认会拦截外部设备对未开放端口的访问，如果3001端口没有配置入站放行规则，就算前两项配置正确，请求也会被防火墙拦住。

• 修改React前端的API请求地址，将原来的http://localhost:3001替换为部署Express服务的服务器的局域网真实IP，格式为http://<服务器局域网IP>:3001，比如服务器局域网IP是192.168.1.10，就改为http://192.168.1.10:3001/testdata。
• 修改Express服务的监听配置，找到代码中启动服务的app.listen语句，修改为：

// 0.0.0.0代表绑定服务器所有网卡地址，允许来自任意地址的请求访问
app.listen(3001, '0.0.0.0', () => {
  console.log('服务已启动，监听端口3001')
})

• 打开Windows服务器的「高级安全Windows Defender防火墙」，新建入站规则，选择「端口」类型，开放TCP协议的3001端口，允许局域网范围内的设备访问。
• 重启Express服务和React应用，再从其他设备访问测试即可。

你已经正确配置了CORS跨域规则，不需要再对CORS部分做额外修改。

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