如何允许跨源重定向至其他URL？解决Spotify授权CORS报错

问题根源 #

你遇到的CORS错误本质是：AJAX请求无法处理跨域重定向。当你用axios向后端/login发起GET请求时，后端会重定向到Spotify的授权页面，但浏览器的CORS策略会拦截这个响应——因为Spotify的服务器并没有配置允许你的前端Origin（比如null，如果是直接打开本地HTML文件的情况）的跨域访问。

正确解决方案 #

Spotify的OAuth2授权流程需要用户在浏览器中主动跳转至授权页面完成交互，不能通过AJAX隐式执行。你需要修改前端代码，替换axios请求为直接页面跳转：

修改后的React代码 #

useEffect(() => {
  const accessToken = Cookies.get('access_token');
  const refreshToken = Cookies.get('refresh_token');

  setAccessToken(accessToken);

  // 如果没有有效token，直接跳转到后端登录路由
  if (!accessToken && !refreshToken) {
    window.location.href = 'http://localhost:3001/login';
  }
}, [])

后端CORS配置补充 #

确保后端正确配置CORS，允许前端域名（比如React默认的http://localhost:3000）：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的前端实际地址
  credentials: true // 若需要携带cookie，必须开启此项
}));

完整授权流程梳理 #

1. 前端页面加载时，检查cookie中的access_token或refresh_token
2. 若无有效token，直接跳转至后端/login路由
3. 后端重定向至Spotify授权页，用户完成登录授权
4. Spotify将用户重定向回你配置的redirect_uri（应为后端的回调路由，比如/callback）
5. 后端在/callback路由中，用授权码交换access_token和refresh_token，将其存入cookie后跳回前端页面
6. 前端再次读取cookie中的token，完成登录状态设置

额外注意事项 #

• 不要用file://协议打开前端页面，必须通过本地服务器（如React的npm start）访问，确保Origin为合法域名而非null
• 确保Spotify开发者后台中配置的redirect_uri与后端回调路由完全一致

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