Загрузка междоменной конечной точки с помощью jQuery AJAX
Я пытаюсь загрузить междоменную HTML-страницу, используя AJAX, но если dataType не является "jsonp", я не могу получить ответ. Однако, используя jsonp, браузер ожидает тип mime скрипта, но получает "text/html".
Мой код для запроса:
$.ajax({
type: "GET",
url: "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute",
dataType: "jsonp",
}).success( function( data ) {
$( 'div.ajax-field' ).html( data );
});
Есть ли способ избежать использования jsonp для запроса? Я уже пытался использовать параметр crossDomain, но он не работал.
Если нет, есть ли способ получить html-контент в jsonp? В настоящее время консоль говорит "неожиданный <" в ответе jsonp.
8 ответов
JQuery Ajax Notes
- Из-за ограничений безопасности браузера большинство запросов Ajax подчиняются той же политике происхождения; запрос не может успешно получить данные из другого домена, субдомена, порта или протокола.
- На запросы сценариев и JSONP не распространяются одинаковые ограничения политики происхождения.
Есть несколько способов преодолеть междоменный барьер:
Есть несколько плагинов, которые помогают с междоменными запросами:
Берегись!
Лучший способ преодолеть эту проблему - создать собственный прокси-сервер в бэкэнде, чтобы ваш прокси-сервер указывал на службы в других доменах, поскольку в бэк-энде не существует такого же ограничения политики источника. Но если вы не можете сделать это в серверной части, обратите внимание на следующие советы.
Предупреждение!
Использование сторонних прокси-серверов не является безопасной практикой, поскольку они могут отслеживать ваши данные, поэтому их можно использовать с общедоступной информацией, но никогда с конфиденциальными данными.
Приведенные ниже примеры кода используют jQuery.get() и jQuery.getJSON (), оба являются сокращенными методами jQuery.ajax ()
CORS Anywhere
CORS Anywhere - это прокси- узел node.js, который добавляет заголовки CORS к прокси-запросу.
Чтобы использовать API, просто добавьте URL к URL API. (Поддерживает https: см. Репозиторий github)
Если вы хотите автоматически включить междоменные запросы при необходимости, используйте следующий фрагмент:
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.get(
'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Независимо от происхождения
Каким бы ни было Origin, это междоменный доступ jsonp. Это альтернатива http://anyorigin.com/ с открытым исходным кодом.
Чтобы получить данные с google.com, вы можете использовать этот фрагмент:
// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options:
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
scriptCharset: "utf-8", //or "ISO-8859-1"
contentType: "application/json; charset=utf-8"
});
$.getJSON('http://whateverorigin.org/get?url=' +
encodeURIComponent('http://google.com') + '&callback=?',
function (data) {
console.log("> ", data);
//If the expected response is text/plain
$("#viewer").html(data.contents);
//If the expected response is JSON
//var response = $.parseJSON(data.contents);
});
CORS Proxy
CORS Proxy - это простой прокси- узел node.js для включения запроса CORS для любого веб-сайта. Это позволяет коду javascript на вашем сайте получать доступ к ресурсам других доменов, которые обычно блокируются из-за политики того же происхождения.
Как это работает? CORS Proxy использует преимущества общего доступа к ресурсам, который был добавлен вместе с HTML 5. Серверы могут указать, что они хотят, чтобы браузеры разрешали другим веб-сайтам запрашивать ресурсы, которые они размещают. CORS Proxy - это просто HTTP-прокси, который добавляет заголовок к ответам, говорящий "любой может запросить это".
Это еще один способ достижения цели (см. http://www.corsproxy.com/). Все, что вам нужно сделать, это раздеть http: // и www. с URL-адреса прокси и добавьте URL с www.corsproxy.com/
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Прокси-браузер CORS
Недавно я обнаружил, что он включает в себя различные утилиты Cross Origin Remote Sharing, ориентированные на безопасность. Но это черный ящик с Flash в качестве бэкэнда.
Вы можете увидеть это в действии здесь: CORS proxy browser
Получите исходный код на GitHub: https://github.com/koto/cors-proxy-browser
Вы можете использовать Ajax-cross-origin jQuery-плагин. С этим плагином вы используете jQuery.ajax() кросс-домен. Для этого он использует сервисы Google:
Плагин AJAX Cross Origin использует Google Apps Script в качестве прокси-получателя jSON, где jSONP не реализован. Если для параметра crossOrigin установлено значение true, плагин заменяет исходный URL-адрес на адрес скрипта Служб Google и отправляет его в качестве закодированного параметра URL-адреса. Скрипт Служб Google использует ресурсы Серверов Google для получения удаленных данных и их возврата клиенту в виде JSONP.
Это очень просто использовать:
$.ajax({
crossOrigin: true,
url: url,
success: function(data) {
console.log(data);
}
});
Вы можете прочитать больше здесь: http://www.ajax-cross-origin.com/
Если внешний сайт не поддерживает JSONP или CORS, единственный вариант - использовать прокси.
Создайте скрипт на своем сервере, который запрашивает это содержимое, а затем используйте jQuery ajax, чтобы запустить скрипт на вашем сервере.
Просто поместите это в заголовок вашей PHP-страницы, и он будет работать без API:
header('Access-Control-Allow-Origin: *'); //allow everybody
или же
header('Access-Control-Allow-Origin: http://codesheet.org'); //allow just one domain
или же
$http_origin = $_SERVER['HTTP_ORIGIN']; //allow multiple domains
$allowed_domains = array(
'http://codesheet.org',
'http://stackru.com'
);
if (in_array($http_origin, $allowed_domains))
{
header("Access-Control-Allow-Origin: $http_origin");
}
Чтобы получить данные с внешнего сайта путем передачи с использованием локального прокси-сервера, как предлагает jherax, вы можете создать страницу php, которая будет извлекать для вас контент из соответствующего внешнего URL-адреса, а затем отправлять запрос на получение этой страницы php.
var req = new XMLHttpRequest();
req.open('GET', 'http://localhost/get_url_content.php',false);
if(req.status == 200) {
alert(req.responseText);
}
в качестве php-прокси вы можете использовать https://github.com/cowboy/php-simple-proxy
Я публикую это на тот случай, если кто-то столкнется с той же проблемой, с которой я сталкиваюсь сейчас. У меня есть термопринтер Zebra, оснащенный сервером печати ZebraNet, который предлагает пользовательский интерфейс на основе HTML для редактирования нескольких настроек, просмотра текущего состояния принтера и т. Д. Мне нужно получить состояние принтера, которое отображается на одной из этих HTML-страниц, предлагаемых сервером ZebraNet, и, например, alert() - сообщение пользователю в браузере. Это означает, что я должен сначала получить эту HTML-страницу в Javascript. Несмотря на то, что принтер находится в локальной сети ПК пользователя, эта политика единого источника все еще остается на моем пути. Я пробовал JSONP, но сервер возвращает html, и я не нашел способа изменить его функциональность (если бы я мог, я бы уже установил магический заголовок Access-control-allow-origin: *). Поэтому я решил написать небольшое консольное приложение на C#. Он должен быть запущен от имени администратора для правильной работы, в противном случае он троллит:D исключение. Вот некоторый код:
// Create a listener.
HttpListener listener = new HttpListener();
// Add the prefixes.
//foreach (string s in prefixes)
//{
// listener.Prefixes.Add(s);
//}
listener.Prefixes.Add("http://*:1234/"); // accept connections from everywhere,
//because the printer is accessible only within the LAN (no portforwarding)
listener.Start();
Console.WriteLine("Listening...");
// Note: The GetContext method blocks while waiting for a request.
HttpListenerContext context;
string urlForRequest = "";
HttpWebRequest requestForPage = null;
HttpWebResponse responseForPage = null;
string responseForPageAsString = "";
while (true)
{
context = listener.GetContext();
HttpListenerRequest request = context.Request;
urlForRequest = request.RawUrl.Substring(1, request.RawUrl.Length - 1); // remove the slash, which separates the portNumber from the arg sent
Console.WriteLine(urlForRequest);
//Request for the html page:
requestForPage = (HttpWebRequest)WebRequest.Create(urlForRequest);
responseForPage = (HttpWebResponse)requestForPage.GetResponse();
responseForPageAsString = new StreamReader(responseForPage.GetResponseStream()).ReadToEnd();
// Obtain a response object.
HttpListenerResponse response = context.Response;
// Send back the response.
byte[] buffer = System.Text.Encoding.UTF8.GetBytes(responseForPageAsString);
// Get a response stream and write the response to it.
response.ContentLength64 = buffer.Length;
response.AddHeader("Access-Control-Allow-Origin", "*"); // the magic header in action ;-D
System.IO.Stream output = response.OutputStream;
output.Write(buffer, 0, buffer.Length);
// You must close the output stream.
output.Close();
//listener.Stop();
Все, что нужно сделать пользователю, это запустить это консольное приложение от имени администратора. Я знаю, что это слишком... расстраивает и усложняет, но это своего рода обходной путь к проблеме политики домена, если вы не можете каким-либо образом изменить сервер.
edit: из js я делаю простой вызов ajax:
$.ajax({
type: 'POST',
url: 'http://LAN_IP:1234/http://google.com',
success: function (data) {
console.log("Success: " + data);
},
error: function (e) {
alert("Error: " + e);
console.log("Error: " + e);
}
});
HTML-код запрашиваемой страницы возвращается и сохраняется в переменной данных.
Ваш URL не работает в эти дни, но ваш код может быть обновлен с этим рабочим решением:
var url = "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute";
url = 'https://google.com'; // TEST URL
$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURI(url), function(data) {
$('div.ajax-field').html(data);
});<div class="ajax-field"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Вам нужен CORS-прокси, который передает ваш запрос от вашего браузера на запрашиваемую службу с соответствующими заголовками CORS. Список таких услуг приведен во фрагменте кода ниже. Вы также можете запустить предоставленный фрагмент кода, чтобы увидеть ping к таким службам из вашего местоположения.
$('li').each(function() {
var self = this;
ping($(this).text()).then(function(delta) {
console.log($(self).text(), delta, ' ms');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jdfreder/pingjs/c2190a3649759f2bd8569a72ae2b597b2546c871/ping.js"></script>
<ul>
<li>https://crossorigin.me/</li>
<li>https://cors-anywhere.herokuapp.com/</li>
<li>http://cors.io/</li>
<li>https://cors.5apps.com/?uri=</li>
<li>http://whateverorigin.org/get?url=</li>
<li>https://anyorigin.com/get?url=</li>
<li>http://corsproxy.nodester.com/?src=</li>
<li>https://jsonp.afeld.me/?url=</li>
<li>http://benalman.com/code/projects/php-simple-proxy/ba-simple-proxy.php?url=</li>
</ul>Догадаться. Использовал это вместо.
$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');