Angular 2：如何處理預檢的響應具有無效的HTTP狀態代碼400.錯誤的請求

Question

Im嘗試使用我的magento的Rest api獲取HTTP GET請求。

下面是實現相同的angular2代碼！

public ngOnInit() { 
    let headers = new Headers({ 'Accept': 'application/json' }); 
    headers.append('Authorization', 'Bearer x9a278mu7xoh4k0jkj08doc5j4b3ac22'); 
    headers.append('Access-Control-Allow-Headers', 'Content-Type'); 
    headers.append('Access-Control-Allow-Methods', 'GET'); 
    headers.append('Access-Control-Allow-Origin', '*'); 

    let options = new RequestOptions({ headers: headers }); 
    return this.http.get('http://10.2.../Mage_ang2/index.php/rest/V1/customers/1',options) 
     .map(response => console.log(response.json)) 
     .subscribe((items: Person[]) => { 
      console.log('items: ' + items); 
      this.people = items; 
     }, error => console.log(error)); 

} 

我得到（哪一個即時假設）的CORS問題。

OPTIONS http://10.2.../Mage_ang2/index.php/rest/V1/customers/1

的XMLHttpRequest不能加載http://10.2.../Mage_ang2/index.php/rest/V1/customers/1。預檢的響應具有無效的HTTP狀態代碼500

我在谷歌的解決方法之後嘗試了下面的步驟來修復相同的問題，但不成功。

1）在Magento .htaccess文件，加入

報頭中設置訪問控制允許來源 「*」

2）在上述的角2的代碼添加，

headers.append（'Access-Control-Allow-Headers'，'Content-Type'）; ...

...

3）試圖改變內容類型從應用/ JSON在

讓頭=新集管（{ '接受'： '應用/ JSON'} ）;

我在想什麼。

需要適當的解決方案來修復CORS（從magento2到angular2）問題。

建議歡迎！

Answer 1

Header set Access-Control-Allow-Origin "*" 

給予Magento的全球跨域訪問（我的理解是一個購物平臺）聽起來像是從安全的角度來看，非常糟糕的主意。

headers.append('Access-Control-Allow-Headers', 'Content-Type'); ... 

Access-Control-Allow-Headers是響應報頭。服務器必須將它發送給客戶端，而不是相反。您的JS無法授予自己訪問其他服務器的權限。

let headers = new Headers({ 'Accept': 'application/json' }); 

你有一些理由認爲該服務器是因爲你的默認設置拋出一個錯誤？

---

回去看看錯誤消息：

預檢

響應具有無效的HTTP狀態碼500

然後做一些基礎研究的學習what a preflight is。

然後做一些更基礎的研究來找出what HTTP status code 500 means。

所以：

• 瀏覽器正在一個OPTIONS請求
• 服務器與500內部服務器錯誤（大概是因爲它沒有被編程爲一個OPTIONS請求）響應。

這意味着，你需要看看你的服務器端代碼（所以不是你的JS在所有），並確定爲什麼它拋出500錯誤。您的服務器的錯誤日誌將是一個開始尋找的好地方。

您需要讓服務器按照the CORS documentation中的規則正確響應OPTIONS請求。 （或者，使用相同的說明，您可以嘗試阻止瀏覽器首先發出預檢請求，這可能非常簡單，就像刪除所有嘗試在請求中設置CORS響應標頭一樣簡單不屬於）。