angular - Angular 4：对 XMLHttpRequest 的访问已被 CORS 策略阻止

Question

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

组件.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 是对象数组。

服务.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 浏览器或以下命令。

严格建议开发。

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: *");