Angular调用Node服务对接Spotify API时遭遇CORS跨域问题

问题根源 #

你当前用Angular的HttpClient发起AJAX请求调用Node服务的/login接口，Node服务返回重定向到Spotify授权页面。但AJAX请求的跨域重定向会被浏览器CORS策略拦截——因为Spotify的accounts.spotify.com不会为localhost:4200添加Access-Control-Allow-Origin响应头，这和你Node服务的CORS配置无关（Node的CORS只处理Angular和Node之间的跨域，问题出在AJAX请求跟随重定向到了第三方域名）。

修复方案 #

修改Angular端SpotifyService的login方法，放弃AJAX请求，直接让浏览器跳转至Node服务的/login地址：

export class SpotifyService {
  private loginUrl = 'http://localhost:3000/login';

  login() {
    window.location.href = this.loginUrl;
  }
}

这种方式是浏览器正常页面跳转，不属于AJAX跨域请求，不会触发CORS限制。用户完成Spotify授权后，Spotify会回调到你Node服务的/callback接口，此时需要调整Node端的回调逻辑，跳回你的Angular应用页面：

// Node服务的/callback路由修改
app.get('/callback', async (req, res) => {
  const { code } = req.query;

  try {
    const tokens = await spotifyApi.authorizationCodeGrant(code);
    spotifyApi.setAccessToken(tokens.body.access_token);
    spotifyApi.setRefreshToken(tokens.body.refresh_token);

    // 跳回Angular应用的landing页面
    res.redirect('http://localhost:4000/landing');
  } catch (error) {
    res.status(500).send(error.message);
  }
});

注意事项 #

• 确认Spotify开发者控制台中注册的回调地址为http://localhost:3000/callback，与Node服务中redirectUri配置完全一致。
• 如果需要在Angular应用中获取授权后的token，可考虑在Node服务回调成功后，将token通过URL参数传递给Angular页面，或通过后端存储（如session、cookie）管理。

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