Проблема CORS - Угловая /PHP/Apache

87
6

Я думаю, что есть много подобных тем здесь и там в Интернете, но я просто потратил 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:

enter image description here

и я вижу это на вкладке сети:

enter image description here

На вкладке "Ответ" отображается полностью пустой ящик.

Я могу удалить пользовательскую часть заголовка из моего http.post, это ничего не меняет.

Мне кажется странным, что я могу нажать кнопку редактирования и повторной отправки FireFox, ничего не меняя, и появятся правильные результаты...

Спасибо за чтение/помощь

спросил(а) 2021-01-19T14:27:59+03:00 2 месяца, 4 недели назад
1
Решение
76

Сначала вам нужно исправить ваши данные 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);

Это сработало для меня.

ответил(а) 2021-01-19T14:27:59+03:00 2 месяца, 4 недели назад
44

У меня была такая же проблема, но она была решена путем добавления этих строк в ваш 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);
}
})

ответил(а) 2021-01-19T14:27:59+03:00 2 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема