2

Recibo este error en Angular cuando hago una llamada al servidor PHP. Este es el error:

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.

En el php solo tengo un echo "1"; y la instrucción 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");
          }
        );

    }


    }

He intentado configurar un proxy segun he leido en algún manual En mi package.json tengo entre otras cosas

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

Y mi archivo proxy.config.json que esta en el mismo directorio.

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

4 respuestas 4

4

El protocolo CORS hace que el navegador complete primero una petición OPTIONS, antes de hacer un GET o un POST, tienes que devolver el encabezado ahí.

Además deberías añadir otro encabezado, Access-Control-Allow-Methods con un valor similar a GET, POST, PUT, DELETE, OPTIONS, HEAD.

Otra opción es configurar un proxy inverso, puedes verlo en esta otra respuesta a un problema similar

Y, además, puedes encontrar más información sobre CORS en esta completísima respuesta

0

prueba con algo como esto, a ver si te lo soluciona:

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

también puede servir una extensión de chrome extensión Cors Asegurarse de activarlo. Aclaro que no es la mejor manera de solucionarlo, pero puede ayudar

0

También puedes agregar al comienzo de tu archivo el siguiente bloque de código:

header('Access-Control-Allow-Origin: http://localhost:4200');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE'); 
header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow- 
Headers, Authorization, X-Requested-With');

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
 http_response_code(200);
 exit();
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.