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

Posted 2023-03-04

【中文标题】对预检请求的响应未通过访问控制检查 - Angular 5 + JWT OAuth

【英文标题】：Response to preflight request doesn't pass access control check - Angular 5 + JWT OAuth

【发布时间】：2018-05-15 14:05:55

【问题描述】：

这是一个非常常见的问题，但是在这里阅读其他帖子已经有几个小时了，我找不到解决方案。我了解服务器必须在响应中包含 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 中设置的标头完全相同。我是不是误会了什么？我该如何解决这个问题？

【参考方案1】：

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