XMLHttpRequest не удается загрузить URL-адрес с помощью jQuery

Я пытаюсь получить некоторые данные json с" удаленного " сайта. Я запускаю свою веб-службу на порту 99000, затем я запускаю свой сайт на порту 99001 (http://localhost:99001/index.формат HTML.)

Я получаю следующее сообщение:

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

даже если я запускаю свою веб-страницу в виде HTML-файла, я получаю следующее:

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

веб-служба возвращает данные. Я пытаюсь поймать элементы данных, как это:

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"}]

вы знаете, почему я получаю эту ошибку?

5 55
jquery json cors cross-domain

5 ответов:

вы не можете сделать XMLHttpRequest crossdomain, единственным "вариантом" будет техника под названием JSONP, которая сводится к следующему:

чтобы запустить запрос: добавьте новый <script> тег с удаленным url, а затем убедитесь, что удаленный url возвращает допустимый файл javascript, который вызывает функцию обратного вызова. Некоторые службы поддерживают это (и позволяют вам назвать свой обратный вызов в параметрах GET).

другой простой выход, было бы создать "прокси" на локальном сервере, который получает удаленный запрос, а затем просто "перенаправляет" его обратно на ваш javascript.

edit / addition:

Я вижу, что jQuery имеет встроенную поддержку JSONP, проверяя, содержит ли URL-адрес "callback=?"(где jQuery заменит ? с фактическим методом обратного вызова). Но вам все равно нужно будет обработать это на удаленном сервере, чтобы сгенерировать правильный ответ.

39

в новом 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);
    }
})
33

возиться с 3 рабочих решений в действии.

учитывая внешний 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

нашел возможный обходной путь, который я не считаю, был упомянут.

вот хорошее описание проблемы: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

В основном, пока вы используете формы / url-кодированные / простые текстовые типы контента, вы в порядке.

$.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 formatter используется при разборе равнины текстовый тип контента.

и не забывайте в Интернете.config:

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

надеюсь, что это помогает.

6

Я использую WebAPI 3 и столкнулся с той же проблемой. Проблема решена, поскольку @Rytis добавил свое решение. И я думаю, что в WebAPI 3, нам не нужно определять метод RegisterWebApi.

мое изменение было только в интернете.конфигурационный файл и работает.

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

Спасибо за ваше решение @Rytis!

0