XMLHTTPREQUEST не может загрузить URL с jQuery
-
26-09-2019 - |
Вопрос
Я пытаюсь получить данные 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"}]
Вы знаете, почему я получаю эту ошибку?
Решение
Вы не можете сделать XMLHTTPREQUEST Crossdomain, единственный «опция» будет техникой, называемой JSONP, который доходит до этого:
Чтобы начать запрос: добавить новый <script>
Тег с удаленным URL-адресом, а затем убедитесь, что удаленный URL возвращает действительный файл JavaScript, который вызывает функцию обратного вызова. Некоторые сервисы поддерживают это (и позвольте вам назвать свой обратный вызов в получении параметров).
Другой простой выход, будет создать «прокси» на вашем локальном сервере, который получает удаленный запрос, а затем просто «пересылает» его обратно в ваш JavaScript.
Редактировать / Дополнение:
Я вижу jQuery имеет встроенную поддержку для JSONP, проверив, содержит ли URL-адрес «Callback =?» (где jQuery заменит? С фактическим методом обратного вызова). Но вам все равно нужно обработать, чтобы на удаленном сервере создать действительный ответ.
Другие советы
В новом 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);
}
})
Widdle с 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/
Нашел возможный обходной путь, который я не верю, было упомянуто.
Вот хорошее описание проблемы:http://www.asp.net/web-api/overview/security/enabling-cross-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 используется при анаразбинии типа простого текста.
И не забудьте в web.config:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST" />
</customHeaders>
</httpProtocol>
Надеюсь это поможет.
Я использую 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!