React调用接口遇CORS错误，Node.js却正常？求原因解析

咱们先把核心原因说透：CORS（跨域资源共享）是浏览器专属的安全限制，Node.js作为服务器端运行环境，完全不受这个规则约束。下面分开解释两边的情况：

Node.js端无CORS问题的原因 #

Node.js代码是在服务器（或者你的本地终端）里运行的，它直接向目标API发送HTTP请求，不存在浏览器的同源策略限制。浏览器的同源策略本质是防止前端页面随便请求其他域名的资源，避免恶意网站窃取用户的敏感数据，但服务器之间的请求本来就是后端服务的常规操作，没有这种安全顾虑。

从你贴的代码来看，Node.js端的请求逻辑和React端几乎一模一样：生成Authorization头、发送POST请求、携带相同的请求体。但因为运行环境不是浏览器，目标服务器收到请求后直接处理并返回响应，不会触发CORS相关的校验。

React端出现CORS错误的原因 #

React代码是在用户的浏览器里运行的，当你从前端页面（比如本地开发时的http://localhost:3000）向https://api-gateway.exmple.com发请求时，这属于跨域请求（只要协议、域名、端口任意一个不一样就算跨域）。

浏览器会先自动发送一个OPTIONS预检请求到目标服务器，询问：“我这个域名的请求你允许吗？”如果目标服务器没有配置CORS规则（比如返回Access-Control-Allow-Origin头允许你的前端域名），浏览器就会直接拦截请求，抛出CORS错误——这和你的React代码逻辑无关，完全是浏览器的安全机制在起作用。

给你几个常见的解决思路 #

• 让目标API的运维方配置CORS规则，添加允许你的前端域名的响应头（比如开发环境允许http://localhost:3000，生产环境允许你的正式域名）。
• 在React开发环境用代理：比如在package.json里加"proxy": "https://api-gateway.exmple.com"，或者用http-proxy-middleware做更灵活的代理配置，让前端请求先转发到本地服务，再由本地服务转发到目标API，这样就不会触发跨域限制。
• 用你现在的Node.js代码做中间层：前端请求你自己的Node.js服务，再由Node.js服务去请求目标API，因为Node.js不受CORS限制，这样就能绕过浏览器的跨域拦截。

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