Question

我正在尝试使用Spotify connect和Angular 6构建一个简单的PWA。我编写了一项服务来测试登录功能，但是它不起作用。使用Chrome和Opera时，该请求已取消，并且出现了这个著名的错误：

Access to XMLHttpRequest at 'https://accounts.spotify.com/authorize?client_id=MY_CLIENT_ID&redirect_uri=http://localhost:4200/callback/&scope=user-read-private%20user-read-email&response_type=token&state=123' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

使用Firefox时，请求似乎已通过，但返回303如果我在浏览器或邮递员上经过了请求url，则当然可以。

这是我的服务：

public login() {
let headers = new HttpHeaders();
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');


return this.http.get(`https://accounts.spotify.com/authorize?client_id=${this.clientId}&redirect_uri=${this.redirectUri}&scope=user-read-private%20user-read-email&response_type=token&state=123`, {headers: headers})
.subscribe(data => {
    console.log(data);
    return data;
  });

}

如您所见，我附加了Access-control-allow-origin标头，但它不起作用。如果我在Chrome / Firefox网络检查器中检查了请求，则可以看到没有Access-Control-Allow-Origin标头（根据错误消息显示为逻辑）。

我是否错过了带有传递标头的内容？我也尝试这样：

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Access-Control-Allow-Origin': '*'
  })
};

但是此错误附加在终端中：

error TS2345: Argument of type '{ headers: { headers: HttpHeaders; }; }' is not assignable to parameter of type '{ headers?: HttpHeaders .....

我遵循Spotify API Doc并检查了很多SOF问题，但是没有人可以解决我的问题。任何帮助将不胜感激

如何从客户端解决“ No Access-Control-Allow-Origin标头”错误

0 个答案: