Home / Questions / 253629
Accepted
Lorenzo Martín
Asked: 2020-04-12 03:44:57 +0800 CST 2020-04-12 03:44:57 +0800 CST

错误：Angular 中的“已被 CORS 策略阻止”

  • 772

当我调用 PHP 服务器时，我在 Angular 中收到此错误。这是错误：

Access to XMLHttpRequest at 'https://p/angular/php/login.php' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

在php中我只有一个echo "1";和指令header('Access-Control-Allow-Origin: *');

 import { Component, OnInit } from '@angular/core';
    import {Router} from '@angular/router';
    import { HttpClient } from '@angular/common/http';


    @Component({
      selector: 'app-api-login',
      templateUrl: './api-login.component.html',
      styleUrls: ['../app.component.css']
    })


    export class ApiLoginComponent implements OnInit {
      usuario: String="";
      clave: String="";
      url: string; 
      display: String;


      constructor(public router: Router, private http: HttpClient){ 
        this.url="https://pr.es/angular/php/login.php"
        this.display="block";

      }

    ngOnInit() {}

    closeModal(){
      this.display='none';
    }


    login(usuario, clave){ //Metodo

      this.usuario=usuario.value;
      this.clave=clave.value;

      const req = this.http.post(this.url,{
        usuario: 'PrecaNuevo',
        clave: 'PrecaNuevo'
        })
        .subscribe(
          res => {
            console.log(res);
          },
          err => {
            console.log("Error occured");
          }
        );

    }


    }

我试图根据我在一些手册中阅读的内容配置代理在我的 package.json 中我有

"start": "ng serve --proxy-config proxy.config.json",

我的proxy.config.json文件位于同一目录中。

  {
        "/angular/php/*":{
          "target": "https://pr.es/",
          "secure": false,
          "logLevel":"debug"
        }
      }
angular

3 Answers

  1. CORS 协议使浏览器首先完成一个请求OPTIONS，在执行 aGET或 a之前POST，您必须在那里返回标头。

    您还应该添加另一个标题，Access-Control-Allow-Methods其值类似于GET, POST, PUT, DELETE, OPTIONS, HEAD.

    另一种选择是配置反向代理，您可以在此其他类似问题的答案中看到它

    此外，您可以在这个非常完整的答案中找到有关 CORS 的更多信息

    • 4
  2. Best Answer

    尝试这样的事情，看看它是否为你解决了它：

    header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Allow: GET, POST, OPTIONS, PUT, DELETE");
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS") {
    die();
}
    • 0

  3. chrome扩展cors 扩展也可以服务 确保激活它。我澄清这不是解决问题的最佳方法，但它可以提供帮助

    • 0