设置标题时的飞行前问题 Angular 2

Posted 2023-02-27

【中文标题】设置标题时的飞行前问题 Angular 2

【英文标题】：Pre Flight Issue Angular 2 when headers are set

【发布时间】：2017-07-17 12:51:19

【问题描述】：

我正在尝试通过构建一个简单的 spotify 应用来学习 Angular 2。

但不知何故，我陷入了身份验证过程。

我的问题是，当我尝试发送标头设置为 https://accounts.spotify.com/api/token 的 http 帖子时

让 tokenUrl = 'https://accounts.spotify.com/api/token'; 让 keyEncrypted = btoa(this.client_id + ':' + this.client_secret); 让 authHeaders = new Headers(); authHeaders.append('Content-Type', 'application/x-www-form-urlencoded'); authHeaders.append('Authentication', 'Basic' + keyEncrypted); let options = new RequestOptions(headers: authHeaders); 让 body = 'code=' + authCode + '&grant_type=authorization_code' + '&redirect_uri=' + this.redirect_uri; 让 jsonString = JSON.stringify( 代码：authCode， grant_type: '授权码', redirect_uri：this.redirect_uri ) 返回这个._http 。邮政（ 令牌网址， json字符串， 选项 ).map( res => res.json(); )

我收到一个飞行前“对飞行前请求的响应未通过访问控制检查：没有'Access-Control-Allow-Origin'...”

但是当我从返回中删除标题时，例如

返回这个._http 。邮政（ 令牌网址， jsonString // 标题已删除 ).map( res => res.json(); )

飞行前检查似乎已被绕过，但随后出现媒体类型不允许错误。

所以我现在很困惑，想知道： 1. 为什么发送没有标题的帖子会绕过飞行前检查而发送没有标题的帖子不会？ 2. angular http post在设置headers和不设置headers时会发送不同类型的请求吗？

非常感谢。

【问题讨论】：

您正在使用 localhost 访问您的 Angular 应用程序？对于像 spotify 这样的服务来说，一种常见的做法是让您在处于开发模式时使用可以发出请求的域和“localhost”。

【参考方案1】：

您必须准确了解您应该如何从 Spotify 获取令牌。但是看你的代码，我可以从Spotify documentation这一行告诉你

authHeaders.append('Authentication', 'Basic ' + keyEncrypted);

应该是

authHeaders.append('Authentication', 'Bearer ' + keyEncrypted);

首先，尝试使用 Postman 或 Curl 之类的程序从 Spotify API 获取令牌，使用令牌发出请求，然后一旦您从 API 接收到数据并且清楚地了解流程是如何进行的应该可以工作，然后尝试使用 Angular2 应用程序。

【参考方案2】：

Here - 文本/纯文本标题不会触发 CORS 预检。删除 content-type 标头将默认为 text/plain。

尝试使用 Chrome 并在不安全模式下启动它 - PowerShell 中的示例是

& "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\Users\yourusername\AppData\Local\Google\Chrome\User Data\Default"