Загрузка междоменной конечной точки с помощью jQuery AJAX
Я пытаюсь загрузить междоменную HTML-страницу с помощью AJAX, но если тип данных не "jsonp", я не могу получить ответ. Однако с помощью jsonp браузер ожидает тип сценария mime, но получает "текст/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? В настоящее время консоль говорит "unexpected
8 ответов:
jQuery Ajax Notes
- из-за ограничений безопасности браузера, большинство Ajax запросы подлежат та же политика происхождения; запрос не может успешно извлечь данные из другого домена, поддомена, порта или протокола.
- на запросы Script и JSONP не распространяются одинаковые ограничения политики происхождения.
есть несколько способов преодолеть кросс-домен барьер:
- CORS Прокси альтернативы
- способы обойти того же происхождения политики
- Преодоление Кросс-Доменного Барьера
есть некоторые плагины, которые помогают с кросс-домен запросы:
головы!
лучший способ преодолеть эту проблему, это создать свой собственный прокси в фоновом режиме, так что ваш прокси будет указывать на службы в других доменах, потому что в фоновом режиме не существует та же политика происхождения ограничение. Но если вы не можете сделать это в фоновом режиме, то обратите внимание на следующие советы.
предупреждение!используя сторонние прокси-серверы не являются безопасной практикой, потому что они могут отслеживать Ваши данные, поэтому их можно использовать с общедоступной информацией, но никогда с приватными данными.
примеры кода, показанные ниже, используют jQuery.получить() и jQuery.getJSON (), оба являются сокращенными методами jQuery.ajax ()
CORS Куда угодно
CORS Anywhere - это узел.Яш доверенности который добавляет заголовки 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); });
Независимо От Происхождения
все Происхождение это кросс домен jsonp открыть. Это альтернатива с открытым исходным кодом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 прокси-это простой узел.Яш доверенности чтобы включить запрос CORS для любого веб-сайта. Это позволяет коду javascript на вашем сайте получать доступ к ресурсам в других доменах, которые обычно блокируется из-за политики того же происхождения.
как это работает? CORS Proxy использует преимущества совместного использования ресурсов из разных источников, что является функцией, которая была добавлена вместе с HTML 5. Серверы могут указать, что они хотят, чтобы браузеры разрешали другим веб-сайтам запрашивать ресурсы, которые они размещают. Кеш прокси-сервера-это просто 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 proxy browser
недавно я нашел этот, он включает в себя различные утилиты удаленного обмена Cross Origin, ориентированные на безопасность. Но это черный ящик со вспышкой в качестве бэкэнда.
вы можете увидеть его в действии здесь: CORS proxy browser
Получить исходный код на GitHub: koto / cors-proxy-browser
вы можете использовать Ajax-cross-origin плагин jQuery. С помощью этого плагина вы используете
jQuery.ajax()
домен крест. Для этого он использует сервисы Google:Аякс крест происхождения плагин использовать Google приложений скрипт как прокси-сервер в формате 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://stackoverflow.com' ); if (in_array($http_origin, $allowed_domains)) { header("Access-Control-Allow-Origin: $http_origin"); }
Я отправляю это в случае, если кто-то сталкивается с той же проблемой я столкнулся сейчас. У меня есть термопринтер 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 запрашиваемой страницы возвращается и хранится в сведения переменной.
чтобы получить внешний сайт формы данных, передав его с помощью локального прокси, как это было предложено jherax, вы можете создать страницу php, которая извлекает содержимое для вас из соответствующего внешнего url-адреса, а затем отправить запрос get на эту страницу 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
вам нужен прокси-сервер 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>