预检请求未通过访问控制检查：

Posted 2023-03-04

【中文标题】预检请求未通过访问控制检查：

【英文标题】：preflight request doesn't pass access control check:

【发布时间】：2022-01-04 10:44:30

【问题描述】：

在 Angular 中触发 http 调用时出现以下错误

CORS 策略已阻止从源“http://localhost:4200”访问“loginapi”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：否“Access-Control-Allow-Origin”请求的资源上存在标头。

userdata(user: string): Observable<any> 
    const form = new FormData();
    return this.http.put<any>(`/$user`, form, 
      headers: this.jsonHeaders
    );
  

 private jsonHeaders = 
    accept: 'application/json'
  ;

【问题讨论】：

你读懂了developer.mozilla.org/en-US/docs/Web/HTTP/CORS吗？

客户端应用程序对这些错误无能为力。服务器必须配置为接受应用程序的请求。在 enable-cors.org 了解如何为特定服务器启用 CORS。

在此处查看我对相关问题的回答：***.com/a/70112286/502999

【参考方案1】：

当浏览器发出跨域请求时，浏览器会添加一个带有当前来源（方案、主机和端口）的 Origin 标头。

假设您可以控制提供 API 功能的服务器，您必须在服务器端允许访问（更新 CORS 策略）（尤其是出于安全原因），请查看以下内容： https://developer.chrome.com/docs/extensions/mv2/xhr/