对预检请求的响应未通过访问控制检查 - Angular 5 + JWT OAuth答案

【问题标题】：Response to preflight request doesn't pass access control check - Angular 5 + JWT OAuth对预检请求的响应未通过访问控制检查 - Angular 5 + JWT OAuth
【发布时间】：2025-12-23 02:30:06
【问题描述】：

这是一个非常常见的问题，但是在这里阅读其他帖子已经有几个小时了，我找不到解决方案。我了解服务器必须在响应中包含 Access-Control-Allow-Origin 标头，否则浏览器将不允许 javascript 代码访问资源。

当我从 Postman 调用所述 URL 时，它可以正常工作，因为它们不受此安全策略的限制，但我使用它只是为了确保响应包含标头：

由于标题存在，我认为浏览器不应该抱怨。这就是我从 Angular 5 拨打电话的方式：

let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append('Accept', 'application/json');
headers.append('Audience', 'any');
let options = new RequestOptions({ headers: headers });

return this.http
.post(this.apiUrl, data, options)
.map((res: any) => {
  if (res.success) {
    localStorage.setItem('auth_token', res.access_token);
    this._loggedIn = true;
  }
  return res.success;
});

我在请求中设置的标头与从 Postman 中设置的标头完全相同。我是不是误会了什么？我该如何解决这个问题？

【问题讨论】：

标签： javascript angular cors asp.net-web-api2 jwt

【解决方案1】：

您需要您的服务器在 http 的 OPTIONS (https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS) 方法请求中返回这些标头。我不久前在 python 中创建的 API 也遇到了类似的问题，但同样的原则也适用。据我了解，预检请求是 OPTIONS 请求，如果它没有响应所需的标头，浏览器甚至不会发出您想要的实际请求。这样，如果您使用 Fiddler 或开发人员工具中的网络选项卡，您就不会看到请求发出。希望对您有所帮助。

【讨论】：