Проблема CORS - Угловая /PHP/Apache
Я думаю, что есть много подобных тем здесь и там в Интернете, но я просто потратил 1 час поиска и до сих пор не могу это исправить.
Я не могу сделать запрос с POST на моем сервере (Apache & PHP) с помощью Angular.
Я использую angular/cli v.6.2.1 с узлом 10, apache 2.4 и php 7.1
Вот простой код из Http-вызова (HttpClient & HttpHeaders оба происходят из @angular/common/http):
constructor(private http: HttpClient){}
this.http.post('http://localhost/distributor.php', ['prop1':'value1', 'prop2':'value2'], {headers: new HttpHeaders().set('Access-Control-Allow-Origin','*')}).subscribe(
data => {
console.log(data);
},
err => {
console.log('error');
});
}
Я просто пытаюсь отправить что-то обратно из PHP таким образом:
<?php
$data = $_POST;
echo json_encode($data);
Я уже разрешил все происхождение в файле конфигурации apache. Как Firefox, так и Chrome просто подвели меня после предвыборки "ОПЦИИ" и ничего не делают, нет возврата из файла PHP.
Вот что показывает мне FireFox:
и я вижу это на вкладке сети:
На вкладке "Ответ" отображается полностью пустой ящик.
Я могу удалить пользовательскую часть заголовка из моего http.post, это ничего не меняет.
Мне кажется странным, что я могу нажать кнопку редактирования и повторной отправки FireFox, ничего не меняя, и появятся правильные результаты...
Спасибо за чтение/помощь
Сначала вам нужно исправить ваши данные POST; у вас есть квадратные скобки вокруг синтаксиса объекта.
const data = { 'prop1': 'value1', 'prop2': 'value2' };
this.http.post('http://localhost/distributor.php', data).subscribe(
reply => {
console.log(reply);
},
err => {
console.log('error', err);
});
Затем вам нужно добавить правильные заголовки и установить PHP для работы с JSON:
<?php
header('Access-Control-Allow-Headers: Access-Control-Allow-Origin, Content-Type');
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json, charset=utf-8');
// grab JSON data sent by Angular
$data = json_decode(file_get_contents('php://input'), true);
// add numeric data
$data["prop3"] = 3;
// reply
echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_NUMERIC_CHECK);
Это сработало для меня.
У меня была такая же проблема, но она была решена путем добавления этих строк в ваш php-код
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Content-Type: application/json');
let data = {
'prop1': 'value1',
'prop2': 'value2'
};
return this.http.post('http://localhost/distributor.php', data, {headers: new HttpHeaders().set('Access-Control-Allow-Origin', '*')}).map((response: Response) => {
let data = response;
if (data) {
console.log(data);
}
})
