web-dev-qa-db-ja.com

XMLHttpRequestはjQueryでURLをロードできません

「リモート」ウェブサイトからjsonデータを取得しようとしています。 Webサービスを99000ポートで実行してから、99001ポート（http：// localhost：99001/index.html）でWebサイトを起動します。

次のメッセージが表示されます。

    XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons. Origin http://localhost:99001 is not allowed by Access-Control-Allow-Origin.

WebページをHTMLファイルとして起動しても、次のようになります。

    XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons.Origin null is not allowed by Access-Control-Allow-Origin.

Webサービスはデータを返します。私はこのようなデータ項目をキャッチしようとします：

var url = "http://localhost:99000/Services.svc/ReturnPersons";
$.getJSON(url, function (data) {
success: readData(data)
});
function readData(data) {
    alert(data[0].FirstName);
}

そして、私はこの構造を取得しようとしています：

[{"FirstName":"Foo","LastName":"Bar"},{"Hello":"Foo","LastName":"World"}]

このエラーが発生する理由を知っていますか？

jqueryjsoncross-domaincors
55
Zakaria

XMLHttpRequestクロスドメインを実行することはできません。唯一の「オプション」はJSONPと呼ばれる手法で、これは次のようになります。

リクエストを開始するには：新しい<script>タグをリモートURLに追加し、リモートURLがコールバック関数を呼び出す有効なjavascriptファイルを返すことを確認します。一部のサービスはこれをサポートします（GETパラメーターでコールバックに名前を付けることができます）。

もう1つの簡単な方法は、ローカルサーバー上に「プロキシ」を作成し、リモートリクエストを取得して、それをJavaScriptに「転送」することです。

編集/追加：

URLに「callback =？」が含まれているかどうかを確認することにより、jQueryにはJSONPの組み込みサポートがあります。 （jQueryは？を実際のコールバックメソッドに置き換えます）。ただし、有効な応答を生成するには、リモートサーバーでそれを処理する必要があります。

39
CharlesLeaf

新しいjQuery 1.5では、次を使用できます。

$.ajax({
    type: "GET",
    url: "http://localhost:99000/Services.svc/ReturnPersons",
    dataType: "jsonp",
    success: readData(data),
    error: function (xhr, ajaxOptions, thrownError) {
      alert(xhr.status);
      alert(thrownError);
    }
})
34
Slav

つの有効なソリューションとのフィドルアクション。

外部JSONを指定：

myurl = 'http://wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=France&languages=zh-hans|zh-hant|fr&props=sitelinks|labels|aliases|descriptions&format=json'

解決策1：$ .ajax（）+ jsonp：

$.ajax({
  dataType: "jsonp",
  url: myurl ,
  }).done(function ( data ) {
  // do my stuff
});

ソリューション2：$ .ajax（）+ json +＆calback = ?:

$.ajax({
  dataType: "json",
  url: myurl + '&callback=?',
  }).done(function ( data ) {
  // do my stuff
});

ソリューション3：$ .getJSON（）+ calback = ?:

$.getJSON( myurl + '&callback=?', function(data) {
  // do my stuff
});

ドキュメント： http://api.jquery.com/jQuery.ajax/ 、 http://api.jquery.com/jQuery.getJSON/

19
Hugolpz

言及されたとは思わない回避策を見つけました。

問題の説明は次のとおりです。 http://www.asp.net/web-api/overview/security/enabling-cross-Origin-requests-in-web-api

基本的に、forms/url-encoded/plain textコンテンツタイプを使用していれば問題ありません。

$.ajax({
    type: "POST",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'text/plain'
    },
    dataType: "json",
    url: "http://localhost/endpoint",
    data: JSON.stringify({'DataToPost': 123}),
    success: function (data) {
        alert(JSON.stringify(data));
    }
});

ASP.NET WebAPI2で使用します。だからもう一方の端に：

public static void RegisterWebApi(HttpConfiguration config)
{
    config.MapHttpAttributeRoutes();

    config.Formatters.Clear();
    config.Formatters.Add(new JsonMediaTypeFormatter());

    config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/plain"));
}

このようにして、プレーンテキストコンテンツタイプを解析するときにJsonフォーマッタが使用されます。

そして、Web.configで忘れないでください：

<system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST" />
  </customHeaders>
</httpProtocol>

お役に立てれば。

6
Rytis

WebAPI 3を使用していますが、同じ問題に直面していました。 @Rytisがソリューションを追加したため、問題は解決しました。そして、WebAPI 3では、メソッドRegisterWebApiを定義する必要はないと思います。

私の変更はweb.configファイルにのみあり、機能しています。

<httpProtocol>
 <customHeaders>
 <add name="Access-Control-Allow-Origin" value="*" />
 <add name="Access-Control-Allow-Methods" value="GET, POST" />
</customHeaders>
</httpProtocol>

ソリューション@Rytisに感謝します！

0
Navin Pandit