角度4：CORS策略已阻止对XMLHttpRequest的访问

Question

试图从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：*之后，我也收到以下错误消息：

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

Answer 1

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

严格建议开发。

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

Answer 2

我想问题出在

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

您仅允许“访问”标头。在Angular中，可以设置大约4或5个默认标头。

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

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

或

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