React应用调用Xero Node SDK API时遇CORS错误求助

你的问题核心在于：用fetch请求Node的/connect接口时，接口返回了重定向到Xero授权页的响应，浏览器会尝试跟随这个重定向去请求Xero的域名，但Xero的服务器并没有配置允许你的前端域名（比如localhost:3000）的跨域权限，所以触发了CORS拦截。这不是你自己服务端的CORS配置问题，而是OAuth授权流程的正确打开方式就不该用AJAX请求。

直接解决方案：改用浏览器跳转，不要用fetch #

把React里的handleConnection改成直接跳转到你的Node服务接口，让浏览器完成导航流程，这不会触发CORS限制：

const handleConnection = () => {
  window.location.href = "http://localhost:5000/connect";
};

OAuth授权流程本身就是基于浏览器页面跳转设计的，AJAX请求会因为跨域被拦截，直接跳转才是正确做法。

额外检查：确保Node服务的CORS配置正确（针对其他接口） #

如果你的React应用还需要和Node服务的其他接口做AJAX通信，要确保Node端正确配置了CORS中间件，比如用cors包：

const cors = require('cors');
// 允许你的前端域名跨域请求
app.use(cors({ origin: 'http://localhost:3000' }));

但这步不解决当前的授权页重定向问题，只是保障其他接口的跨域正常。

补充说明 #

还要确认你在Xero开发者后台配置的回调URL是指向你的Node服务的（比如http://localhost:5000/callback），这是完成OAuth授权的必要配置，和CORS无关，但必须正确设置才能让授权流程走完。

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