客户端调用对接Spotify API的Node服务出现CORS问题如何解决？

问题根因 #

• 你用axios.get异步请求/login接口的逻辑不符合OAuth2授权码流程要求：服务端返回的是重定向到Spotify授权页的响应，XHR请求会自动跟随重定向去请求Spotify的资源，而Spotify的授权页没有对你的客户端域名http://localhost:3000开放CORS权限，所以被浏览器拦截报错。你直接在地址栏访问服务端地址能正常运行，是因为浏览器主动发起的导航请求不会触发CORS校验，和异步请求的规则完全不同。
• 你服务端的CORS配置错误：允许的源是服务端自身地址http://localhost:8888，而不是实际发起请求的客户端地址http://localhost:3000。
• 你服务端存在重复的CORS配置：同时用了cors中间件、手动设置响应头、接口内再次设置响应头，多段配置冲突反而会导致CORS规则失效。

修复步骤 #

• 第一步：修改客户端登录逻辑，不要用异步请求跳转授权页
  把按钮点击事件里的axios请求替换为浏览器主动跳转，修改后代码：

function handleOnClick() {
  // 直接跳转服务端登录接口，触发OAuth授权流程
  window.location.href = 'http://localhost:8888/login'
}

如果你的前端开发服务器配了代理转发到8888，也可以写相对路径window.location.href = '/login'。

• 第二步：修正服务端CORS配置，删除重复冲突的规则
  删掉原来所有手动写CORS头的代码，只保留正确的cors中间件配置即可：

const app = express();
// 只保留这段正确的cors配置，其余CORS相关的header设置全删
app.use(cors({ 
  origin: "http://localhost:3000",
  credentials: true 
}));

// 删掉原来的这段手动设置header的代码
/*
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "localhost:8888");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});
*/

// 同时删掉/login接口里所有手动setHeader的Access-Control相关代码

• 第三步（可选优化）：回调完成后跳转回客户端
  现在callback接口授权成功后返回的是静态文字，你可以修改为跳回客户端地址，提升体验：

// 授权成功后替换原来的res.send
// res.send("Success! You can now close the window.");
res.redirect("http://localhost:3000");

后续客户端调用/getTopTracks接口时，直接用axios请求服务端地址即可，因为已经配置了正确的CORS规则，不会再触发跨域错误。

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