CORS Issue - Angular / PHP / Apache

Question

Я думаю, что в Интернете есть много похожих тем, но я потратил 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 просто подвели меня после предварительной проверки «OPTIONS» и больше ничего не делают, никакого возврата из файла PHP.

Вот что FireFox показывает мне:

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

На вкладке «Ответ» отображается совершенно пустое поле.

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

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

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

Answer 1

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

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

Answer 2

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