Spotify API 的 CORS 重定向问题？

Question

我的 Web 应用程序在前端使用 Angular 12，在后端使用 Node.js 12.16.0 w/ Express.js。我正在尝试开发一个 Web 应用程序，允许用户使用他们的 Spotify API 登录，但即使在查找了一堆帖子之后，我在使用 CORS 时遇到了很多麻烦。在前端，我的代码只是使用 HttpClient 调用我的 /login 端点。

public login(): Observable<any> {
    const url = backendURL + BackendEndpoints.Login;

    return this.http.get<any>(url, {withCredentials: true});
}

从后端看，我的端点设置看起来像这样，其中填充了适当的变量，应该将我的前端网页重定向到 Spotify 登录页面。

router.get("/login", (req, res) => {
    var state = generateRandomString(16);

    var scope = 'user-read-email playlist-read-private'
    res.redirect('https://accounts.spotify.com/authorize?' +
        querystring.stringify({
            response_type: 'code',
            client_id: CLIENT_ID,
            scope: scope,
            redirect_uri: REDIRECT_URI,
            state: state,
            show_dialog: true
        }));
});

我也在我的中间件中使用 cors 包。

this.expressApp.use(cors({origin: 'http://localhost:4200', credentials: true}));

我的前端没有重定向，而是收到这个 CORS 错误。

Cross-origin redirection to https://accounts.spotify.com/login?continue=https%3A%2F%2Faccounts.spotify.com%2Fauthorize%3Fscope%3Duser-read-email%2Bplaylist-read-private%26response_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A4200%252Fjoin%26state%3DjOZBRfRFxNi3auk6%26client_id%3D7e37838f2aa3449da5ee2b592a1a185e%26show_dialog%3Dtrue denied by Cross-Origin Resource Sharing policy: Origin null is not allowed by Access-Control-Allow-Origin.

为什么我仍然收到 CORS 错误？如果可能的话，我想只配置我的后端而不是制作代理服务器。

Answer 1

编辑：无效

您是否尝试在 angular 调用的 headers 中添加 Origin ？类似的东西:

public login(): Observable<any> {
    const url = backendURL + BackendEndpoints.Login;
    const header = new HttpHeaders();
    header.append('Origin', 'http://localhost:4200');

    return this.http.get<any>(url, {withCredentials: true, headers: header});
}

编辑2：

您可以尝试创建一个 link :

 <a href="/login" #spotifyConnectLink></a>

然后你创建一个按钮来要求用户点击连接:

 <button (click)='handleCacheAndLaunchConnection()'>Connect To Spotify</button>

在您的 ts 上，您创建了 handleCacheAndLaunchConnection 函数，并强制单击带有 Viewchild 的 link :

 @ViewChild('spotifyConnectLink') spotifyConnectLink: ElementRef;

 handleCacheAndLaunchConnection() {
     //Do the stuff you need for app and cache

    let el: HTMLElement = this.spotifyConnectLink.nativeElement;
    el.click();
 }

希望这项工作

Spotify API 的 CORS 重定向问题？

CORS redirection problem with Spotify API?

spotify

node.js

cors

express

angular