Angular 4：对 XMLHttpRequest 的访问已被 CORS 策略阻止答案

【问题标题】：Angular 4: Access to XMLHttpRequest has been blocked by CORS policyAngular 4：对 XMLHttpRequest 的访问已被 CORS 策略阻止
【发布时间】：2020-03-12 08:35:18
【问题描述】：

试图从 PHP Api 获取数据到 Angular 4

Component.ts：

this.usraeem_ser.get_error_msg(JSON.stringify(this.colFilter)).subscribe(
      (errMsg : any) => {
        console.log(errMsg);
      },
      (error: any) => console.log (error["message"])
    );

this.colFilter 是对象数组。

Services.ts：

get_error_msg(errObj : any):Observable<any>{

    return this.http.post(this.error_msg,errObj,{
      headers: new HttpHeaders ({
        'Content-Type': 'application/json'
      })
    })

  }

this.error_msg 是 API 的路径

在 php 文件中：

<?php 

    // required headers
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: access");
header("Access-Control-Allow-Methods: *");
header("Access-Control-Allow-Credentials: true");
header("Content-Type: application/json; charset=UTF-8");
echo json_encode("test");
?>

即使在后端 API 中提供 Access-Control-Allow-Origin: * 后，我仍然收到以下错误：

出了什么问题我正在做任何解决方案或任何替代方法。

【问题讨论】：

第一眼看上去还不错。你用的是哪个浏览器？

标签： angular cors

【解决方案1】：

尝试使用Canary browser 或以下命令。

严格建议用于开发。

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

【讨论】：

【解决方案2】：

我猜问题出在

header("Access-Control-Allow-Headers: access");

您只允许“访问”标头。 Angular 会设置大约 4 或 5 个默认标题。

在这里，您可以提供通配符 * 或提及允许的标题。喜欢

header("Access-Control-Allow-Headers: Content-Type,Authorization");

或

header("Access-Control-Allow-Headers: *");

【讨论】：