React/Node集成第三方鉴权API 登录后调用报CORS错误咨询

你自己折腾前后端跨域配置完全是方向错了。CORS是浏览器的同源安全限制，是否允许跨域调用的决定权完全在被请求的第三方服务手里——只有对方接口返回的响应头里带了允许你当前前端域名的Access-Control-Allow-Origin配置，浏览器才会放行请求。
对方官方门户能正常调用，只是因为他们把自家门户域名加进了接口的CORS白名单，根本没给你的应用域名加白名单，你前端直接请求100%报跨域，改你自己的代码配置根本动不了第三方的响应头。

所有第三方接口调用全部走你的Node服务端代理，从根源绕开浏览器CORS限制，不要在前端直接请求第三方接口：

• 调整第三方登录回调逻辑：用户在第三方完成登录跳转回你的应用时，把URL上带的授权code、登录凭证这类参数传给你的Node后端，存在服务端会话/安全存储里，不要存在前端直接拿去调接口。
• 前端所有和文件封禁、解封、封禁列表查询相关的操作，全部请求你自己的Node服务对应接口，请求里只传你自己业务体系内的用户标识、文件哈希值这类业务参数即可。
• Node服务收到前端请求后，组装符合第三方要求的请求格式，带上之前存储的对应账号的有效鉴权凭证，从服务端发起对第三方API的调用——服务端发HTTP请求不受浏览器同源策略约束，不存在跨域问题。
• Node端拿到第三方返回的接口结果后，做必要的格式转换、敏感字段过滤，再把业务需要的数据返回给React前端。

别用JSONP、关浏览器安全策略、前端装跨域插件这类偏方，生产环境完全不可用，还会泄露第三方账号鉴权凭证，有严重安全隐患。

• 如果第三方接口配置了IP白名单，直接把你Node服务的出口IP加到对方白名单即可，不需要申请前端域名的CORS白名单。
• 如果第三方发放的登录凭证有有效期，直接在Node端实现凭证自动刷新逻辑，不要把刷新规则、密钥这类信息暴露在前端代码里。
• 如果你之前试过配Vite/Webpack的本地开发代理还是出问题，注意这类代理只在本地开发环境生效，生产环境需要在Node服务层或者Nginx层做转发，不能让生产环境的前端直接请求第三方接口。

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