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"
        }
      }

3 respuestas 3

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

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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