jQuery.getJSON（上いいえ「アクセス制御 - 許可 - 起源」ヘッダエラー）

Question

私は私のウェブサイトBでは、文字列[]

のリストを返すのREST API AでGETメソッドを持って、私がしていますウェブページ

<input type="text" id="tags"/> 

$("#tags").autocomplete({ 
    source: function (request, response) { 
     jQuery.getJSON(     
      "http://localhost:9000/action/controller", 
      function (data) { 
       alert(data); 
       data = jQuery.unique(data) 
       response(data); 
      } 
     ); 
    }, 
    select: function (event, ui) { 
     //work here 
    }, 
}); 

I：私は、私はIIS上で私のWeb API Aを入れて、localhost:9000

ウェブサイトBにそれをバインドさIは、Web API A

から得た文字列値を持つ入力テキストを自動補完したいですBウェブサイトを実行するには、デフォルトでポートを受け取ります

と入力すると、id="tags"入力時に次のようなエラーが発生しますr：

XMLHttpRequest cannot load http://localhost:9000/action/controller. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:60400' is therefore not allowed access. 

誰でも手助けできますか？

Answer 1

サーバー側でヘッダーを指定する必要があります。

<httpProtocol> 
    <customHeaders> 
    <remove name="X-Powered-By" /> 
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" /> 
    <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE" /> 
    <add name="Access-Control-Allow-Origin" value="http://localhost:9000" /> 
    <add name="Access-Control-Allow-Credentials" value="true" /> 
    </customHeaders> 
</httpProtocol> 

1. あなたがここに見つけることができる説明でCORSを使用しての非常に良い例： CORS
2. 私の記憶が正しければCORSので、私はむしろネイティブvar xhr = new XMLHttpRequest();を使用することになりxhr.withCredentials = true;を必要とし、この（のweb.config）のようなものjQueryが必要な場合
3. 任意のドメイン間コールには2つの要求が必要です（動詞OPTIONSの場合は1番目、要求2の場合は2番目）。しかし、第2の要求は、第1の要求がサーバからプロビジョニングヘッダを返す場合にのみ行われる。

Answer 2

webSite Aが呼び出すサービスと同じドメイン（a.k.a. origin）がないため、明らかに問題に直面しています。 CORSを有効にするには、WebサービスでCORSを有効にする必要があります。 https://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

セキュリティ上の理由から、クロスオリジン要求は、明示的に構成されていないアプリケーションによって処理されていません。 .NETスタックでは、Cors Nuget-Packageを使用することができます。これによりCORSを2行の追加コードとして簡単に使用できるようになります。

Answer 3

必要なヘッダーがサーバーに接続されているかどうかを確認してください。処理したいデータに応じて、preflightリクエストまたはsimpleリクエストを作成できます。サーバーに必要なヘッダーがないかぎり、クライアントにはアクセスが許可されません。これはSame origin policyが原因です。 same origin policyをバイパスする方法の1つであるCORSに関するいくつかの調査を行ってください。 私のサーバー側では、preflight要求とwithCredentials値を使用して起点をtrueとして許可しています。また、私はAJAXを使用して飛行前のリクエストを作成し、次にPOSTメソッドがトリガーされます。

HTML5rocks CORSは、CORSの機能を理解する優れた記事です。

これは私のサーバーの設定に入るサーバー側のコードです。

<add name="Access-Control-Allow-Headers" value="*"/> 
<add name="Access-Control-Allow-Methods" value="OPTIONS" /> 
<add name="Access-Control-Allow-Origin" value="http://localhost:9002" /> 
<add name="Access-Control-Allow-Credentials" value="true" />