2017-04-12 26 views
0

Im自分のマゼンタの残りのAPIを使用してHTTP GETリクエストを取得しようとしています。角2:プリフライトのレスポンスを処理する方法が無効なHTTPステータスコード400です。不正なリクエスト

以下は、同じことを達成するための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

Googleで回避策を講じた後、以下の手順を試してみましたが、失敗しました。 Magentoのの.htaccessファイルで

1)は、上記角度2のコードで)

ヘッダが "*"

2アクセス制御 - 許可原点を設定して加え、

を添加headers.append( 'Access-Control-Allow-Headers'、 'C​​ontent-Type'); {: 'アプリケーション/ JSON' '受け入れる'} ...

...

3)は

LETヘッダー=新しいヘッダ(アプリケーション/ JSONからのコンテンツタイプを変更しようとしました);

何が不足していますか?

CORS(magento2からangular2)の問題を解決するには、適切な解決策が必要です。

歓迎! (私はショッピングプラットフォームであることを理解)Magentoのグローバルクロスオリジンのアクセスを与える

+0

これはAngularの問題ではないと言えるでしょう。つまり、フロントサイドにヘッダーを設定していないということです。これはサーバー側の問題です。 – Alex

答えて

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

セキュリティの観点から非常に悪いアイデアのように聞こえます。

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

Access-Control-Allow-Headers応答ヘッダです。サーバーはそれをクライアントに送信しなければなりません。あなたのJSは他のサーバーへのアクセスを許可することはできません。

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

サーバーがあるため、あなたのデフォルト設定のエラーを投げていたことを考えるためにいくつかの理由がありますか?


戻って、エラーメッセージを見て:プリフライトのため

応答what a preflight isを学ぶための基礎研究のビットを行うその後500

無効なHTTPステータスコードを持っています。

次に、what HTTP status code 500 meansを見つけるために少し基本的な調査を行います。

ので:

  • ブラウザがOPTIONSは、サーバーが500内部サーバーエラー(おそらくOPTIONS要求に応答するようにプログラムされていないため)に応答している
  • を要求しつつあります。

これは、あなたの、サーバー側のコードを見て(すべてではないので、あなたのJS)と、それは500エラーを投げている理由を特定する必要があることを意味します。あなたのサーバーのエラーログは、探し始めるのに適しています。

the CORS documentationのルールに従ってOPTIONS要求に正しく応答するには、サーバーを取得する必要があります。

(別の方法として、同じ手順を使用して、ブラウザがプリフライトリクエストを先に実行しないようにすることもできます。リクエストでCORS応答ヘッダーを設定しようとするすべての試行を削除するだけです所属していない)。

+0

ヒントをお寄せいただきありがとうございます。私はPreflightがクロスサイト/ドメインを経由して送信されるリクエストであることを理解しています。サーバーがOPTIONSリクエストを受け取るよう正しく設定されているかどうかを確認する必要があります。 500のエラーコードのために、私はサーバーのログをチェックしました。エラーはないようです....また、どの行を削除するかとは別に、headers.append( 'Access-Control-Allow-Headers'、 'C​​ontent-Type' );プリフライト要求のためのブラウザを防ぐために – Sach

+0

ブラウザ側からのOPTIONS要求を無効にするための提案 – Sach

+0

@Sach - 私の答えの最後の段落を参照してください。 – Quentin

関連する問題