CORS問題-Angular / PHP / Apache

Question

我認為互聯網上到處都有很多類似的話題，但是我只是花了1個小時進行搜索，但仍然無法解決。

我無法使用Angular在服務器（Apache和PHP）上通過POST發出請求。

我在節點10，Apache 2.4和PHP 7.1中使用angular / cli v.6.2.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);
            }
        })