Я получаю эту ошибку в Angular, когда звоню на сервер PHP. Это ошибка:
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"
}
}
Протокол CORS заставляет браузер сначала выполнить запрос
OPTIONS
, прежде чем делать aGET
или aPOST
, вы должны вернуть туда заголовок.Вы также должны добавить еще один заголовок
Access-Control-Allow-Methods
со значением, подобнымGET, POST, PUT, DELETE, OPTIONS, HEAD
.Другой вариант - настроить обратный прокси-сервер, вы можете увидеть его в этом другом ответе на аналогичную проблему.
И, кроме того, вы можете найти больше информации о CORS в этом очень полном ответе.
Попробуйте что-то вроде этого и посмотрите, исправит ли это для вас:
расширение cors расширения chrome также может служить . Обязательно активируйте его. Уточняю, что это не лучший способ ее решения, но может помочь