ローカルホスト上の別のポートに要求を送信するときにCORSヘッダー 'Access-Control-Allow-Origin'が表示されない

Question

ノードWebサーバー（Express）がポート6000で実行されています。

var xhr = new XMLHttpRequest(); 
var url = 'http://localhost:4000/endpoint'; 
xhr.open('POST', url, true); 
xhr.setRequestHeader('Content-type', 'application/json'); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4 && xhr.status === 200) { 
    console.log('endpoint'); 
    callback(xhr.responseText); 
    } 
}; 
xhr.send(JSON.stringify({'key': 'value'})); 

がポート4000上で実行している別の急行のサーバーがあります：http://localhost:6000/が呼び出されると

は、index.htmlは実行するスクリプト、logic.jsを持っているクライアントに提供しています。

サーバは単に要求本体が送信した内容を返すエンドポイント設定します：私はhttp://localhost:6000/にアクセスすると

app.route('/segment') 
    .post(bodyParser.json(), function(req, res) { 
    res.set('Access-Control-Allow-Origin', '*'); 
    res.send(req.body); 
}); 

を、私は、ブラウザのコンソールでこれを見ている：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4100/segment. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing) 

がありますプロトタイプ作成中にこれを回避する方法は？

Answer 1

エンドポイントは、実際のリクエストを行う前に、ブラウザがCORSヘッダーをチェックするために使用するOPTIONS HTTPメソッドを提供していない可能性があります。

開発とプロダクションで異なるCORSヘッダーが必要な場合は、新しいバックエンド設定オプションに許可された起点の値を追加し、グローバル応答フィルタから提供することをお勧めします。

Answer 2

あなたはので、これはpreflighted request（経験則：HTMLフォームのenctype属性の有効な値は、プリフライトリクエストをトリガーするではないのContent-Type）であるxhr.setRequestHeader('Content-type', 'application/json');を設定しています。

サーバー側のコードでは、POST要求に応答してAccess-Control-Allow-Originヘッダーのみが設定されます。プリフライトのOPTIONS要求にも応答するためにサーバーサイドコードを記述する必要があります。ここで

Answer 3

は、この問題を解決するためのいくつかの方法があります。

ベスト：CORSヘッダー（サーバの変更が必要）

CORS（クロスオリジンリソースの共有）は、「サーバーが言うするための方法です私はあなたが別の起源から来ても、あなたの要求を受け入れます」これはサーバーとの協力が必要なため、サーバーを変更できない場合（外部APIを使用している場合など）、この方法は機能しません。

サーバーを変更して、Access-Control-Allow-Origin：*ヘッダーを追加して、任意の場所からのクロスオリジン要求を有効にします（または*の代わりにドメインを指定します）。これはあなたの問題を解決するはずです。

第2希望：プロキシサーバー

サーバーを変更することはできません場合は、あなたがあなた自身のプロキシを実行することができます。また、このプロキシは、あなたのページと同じOriginにない場合、Access-Control-Allow-Originヘッダーを返すことができます。

リモートサーバーにAPIリクエストを送信するのではなく、リモートサーバーに転送するリクエストをプロキシに送信します。ここにいくつかのプロキシオプションがあります。

第三の選択肢：JSONPはCORSとプロキシサーバーがあなたのために動作しない場合は、JSONPを助けるかもしれ

（サーバーのサポートが必要です）。あなたは、本質的にコールバックパラメータを指定してGETリクエストを行います。

（取得）http://api.example.com/endpoint?callback=foo あなたはそれを扱うことができ、あなたのコールバックへの関数呼び出しのJSON応答をラップするサーバー： "{（

fooというあなた"：" json "、here：true}） JSONPはGETリクエストのみをサポートしていますが、依然として協調サーバーが必要であるという欠点があります。