角2 CORSの問題

Question

次のAngular 2 HTTPリクエストがあります。

const endpoint = '<auth_url>'; 
 
const body = { 
 
    prompt: 'consent', 
 
    grant_type: 'authorization_code', 
 
    redirect_uri: '<redirect_url>', 
 
    code: '<authorization_code>' 
 
}; 
 

 
const headers = new Headers(); 
 
headers.append('Authorization', 'Basic <auth>'); 
 
headers.append('Content-Type', 'application/x-www-form-urlencoded') 
 

 
const options = new RequestOptions({ headers }); 
 

 
this.http.post(endpoint, body, { headers: headers }) 
 
.map(res => res.json()) 
 
.subscribe(
 
    data => console.log(JSON.stringify(data)), 
 
    error => console.error(JSON.stringify(error)), 
 
() => console.log('Request complete') 
 
);

これはExpressJSインスタンスに添付されていますnode-oidc-providerに接続された要求が原因でプリフライトのサーバーにオプションとして終わるように、私が午前問題は、CORSです。上記のようにContent-Typeヘッダーを指定したので、これは当てはまりません。 Annoyingly私はこれがサーバーまたはAngular2コードの問題であるかどうかを判断しようとしていますか？

ExpressJSアプリケーションで明示的にCORSを有効にする必要がありますか？そうでない場合は、POSTで正しいヘッダーを設定しても効果がありません。

Answer 1

はい、サーバー側でCORSを有効にする必要があります。つまり、サーバーを制御できるかどうかです。 はここであなたがコードからまたはWebServerの自体にこれらのヘッダを追加したい場合などのサーバーに関するいくつかの詳細を共有することができCORS

Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: GET,POST,PUT,DELETE 
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept 

を有効にするには、サーバから返されるべきヘッダです。

POSTリクエストでヘッダーを設定しても効果がない理由についての質問については、ブラウザはXHTTPリクエストの前にOPTIONリクエストを発行し、CORSの受け入れに関するサーバーの許可を求める。

サーバー上で制御権がある場合は、前述のヘッダーを追加できます。そうでない場合、このチェックを克服するためにいくつかのブラウザプラグインを使用することができます。ここで

は、開発ツールでネットワーク]タブがCORSがサーバー上で設定する必要があります