Angular前端调用Express后端请求Spotify API遇CORS跨域问题求助

核心原因 #

问题本质是：前端用AJAX（Angular的HttpClient）请求后端接口时，后端返回302重定向到Spotify授权页，浏览器会自动替前端发起对Spotify的请求，但accounts.spotify.com未给localhost:4200配置CORS权限，触发跨域拦截。而直接在浏览器地址栏请求后端接口时，重定向属于浏览器层面的跳转，不属于AJAX跨域范畴，因此正常。

具体解决步骤 #

1. 修改后端Express接口逻辑 #

把直接返回302重定向的逻辑，改成返回包含Spotify授权URL的JSON响应：

// 原错误写法（直接重定向）
app.get('/authorization', (req, res) => {
  const authUrl = 'https://accounts.spotify.com/authorize?client_id=...&...';
  res.redirect(authUrl); // 触发前端AJAX跨域问题
});

// 修改后的正确写法
app.get('/authorization', (req, res) => {
  const authUrl = 'https://accounts.spotify.com/authorize?client_id=...&...';
  res.json({ authUrl: authUrl }); // 将授权URL返回给前端
});

2. 修改前端Angular逻辑 #

收到后端返回的授权URL后，用浏览器原生跳转方式跳转到Spotify授权页，而非继续用AJAX处理：

// Angular组件中的请求逻辑
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({...})
export class AuthComponent {
  constructor(private http: HttpClient) {}

  startSpotifyAuth() {
    this.http.get('http://localhost:3000/authorization').subscribe(
      (response: any) => {
        // 直接跳转至Spotify授权页
        window.location.href = response.authUrl;
      },
      (error) => {
        console.error('请求后端授权接口失败:', error);
      }
    );
  }
}

3. 确认后端CORS配置正确 #

确保Express已配置CORS中间件，允许前端localhost:4200访问：

const cors = require('cors');
app.use(cors({ origin: 'http://localhost:4200' }));

额外注意点 #

• Spotify授权流程的redirect_uri必须指向后端接口（如http://localhost:3000/authorization/get-spotify-token），用户授权后Spotify会跳转到该接口，后端再用code换取token，之后可跳转至前端页面或返回token给前端。
• 不要使用no-cors模式，这种模式下无法获取授权后的返回数据，满足不了Spotify授权流程需求。

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