特定のHTTPヘッダーキーの値のペアを正しく設定できない

Question

HTTPヘッダーのキー値をhttp.postに追加することで問題が発生します。それは非常にシンプルなはずですが、正しく設定されていません。私たちはサーバ側でスプリングブートとクライアントサイドのフレームワークを使用しています。 私たちのバックエンドの要求は次のヘッダーの値：角度で

'Content-Type' = 'application/json' 
'X-Requested-With' = 'XMLHttpRequest' 
'Cache-Control' = 'no-cache' 

は、私は、ヘッダーを作成し、このヘッダは、私がRequestOptionsを追加し、POSTリクエストにこのオプションを追加します。以下 を参照してくださいコード：

..... 
    let myHead = new Headers(); 
    myHead.append('Content-Type', 'application/json'); 
    myHead.append('X-Requested-With', 'XMLHttpRequest'); 
    myHead.append('Cache-Control', 'no-cache'); 
    const options = new RequestOptions({ headers: myHead }); 

    return this.http.post(ServerUrl,data, options).map((response: Response) => {..//do Something...} 

... 

問題がある、私はポストの要求をチェックしていた場合、私は、ヘッダーが正しく設定されていないことがわかります。

上記のように、私が期待しているように、キー値として正しく設定されていません！

ツールでこれを行う場合は、郵便配達プラグインは、あなたはそれがcorretly行われるべき方法を参照してください。

：私は、ヘッダーを設定するには、さまざまなオプションの多くを試みたが、私はいつもそれは常にこのよう1行に設定されることに終わるれた

POST /ias-vwa/api/auth/login HTTP/1.1 
Host: de00-fm26-l1:9090 
Content-Type: application/x-www-form-urlencoded 
X-Requested-With: XMLHttpRequest 
Cache-Control: no-cache 
Postman-Token: c9bc0404-bc1e-57eb-fca4-07bba9ee6d93 

アクセス制御リクエスト・ヘッダー：アクセス・コントロール・許可起源、キャッシュ制御、コンテンツタイプ、xは、要求された - と

私はブラウザ上で取得エラー：

XMLHttpRequest cannot load http://t00:9090/ias-vwa/api/auth/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401. 

どのようなボディでも私にそれについてのヒントを与えることができますか？

Answer 1

私はこの問題を解決しました。言及として この記事ではとYordanニコロフから、いくつかの状況（記事で説明したように）にブラウザがプリフライトリクエストを送信する場合、それは

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests 

CORSの問題です。この要求では、カスタム値はAccess-Control-Request-Headersのようにのみ指定されます。このリクエストは、OPTIONSメソッドによるHTTPリクエストになります。この場合のサーバーでは、この要求をフィルタリングし、このカットソーヘッダーを許可するためのフィルタを実装する必要があります。プリフライト要求がHTTP200で応答された後、クライアントはカスタムヘッダーを含めて実際に要求を送信します。このCORSの問題は、要求が他のドメインからのものである場合に重要です。

したがって、クライアント側（angular2）の設定は正しく設定されます。

ご希望の方は

Answer 2

あなた（あなたのアプリのライブ）とは異なるドメインにPOSTしようとしていますが、CORSの問題で実行しています。 応答にヘッダーとしてAccess-Control-Allow-Originを追加する必要があります。

Access-Control-Allow-Origin: *