Загрузка междоменной конечной точки с помощью 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&[email protected]&_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.

113 голосов | спросил xonorageous 21 FebruaryEurope/MoscowbThu, 21 Feb 2013 19:04:31 +0400000000pmThu, 21 Feb 2013 19:04:31 +040013 2013, 19:04:31

8 ответов


0

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);
});


Независимо от происхождения

Независимо от источника является междоменным доступом 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 Proxy - простой прокси-сервер node.js , позволяющий запрашивать CORS для любого веб-сайта. Он позволяет коду javascript на вашем сайте получать доступ к ресурсам других доменов, которые обычно блокируются из-за политики того же происхождения.

Как это работает? CORS Proxy использует преимущества общего доступа к ресурсам, который был добавлен вместе с HTML 5. Серверы могут указать, что они хотят, чтобы браузеры разрешали другим веб-сайтам запрашивать ресурсы, которые они размещают. CORS Proxy - это просто HTTP-прокси, который добавляет заголовок кответы о том, что «любой может запросить это».

Это еще один способ достижения цели (см. www.corsproxy.com ). Все, что вам нужно сделать, это убрать http: // и www. с 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
Получите исходный код на GitHub: koto /cors-proxy-browser

ответил jherax 25 J0000006Europe/Moscow 2013, 18:18:13
0

Вы можете использовать Ajax-cross-origin плагин jQuery. С этим плагином вы используете междоменный домен jQuery.ajax(). Для этого он использует службы Google:

  

Плагин AJAX Cross Origin использует Google Apps Script в качестве прокси-сервера jSON.   getter, где jSONP не реализован. Когда вы устанавливаете crossOrigin   При значении true плагин заменяет исходный URL-адрес на Google.   Apps Script адрес и отправить его как закодированный параметр URL. Google   Приложения Script используют ресурсы серверов Google для получения удаленных данных, и   верните его обратно клиенту как JSONP.

Это очень просто использовать:

    $.ajax({
        crossOrigin: true,
        url: url,
        success: function(data) {
            console.log(data);
        }
    });

Вы можете прочитать больше здесь: http://www.ajax-cross-origin.com/

ответил Ninioe 3 PM00000080000005231 2014, 20:30:52
0

Если внешний сайт не поддерживает JSONP или CORS, единственный вариант - использовать прокси.

Создайте на своем сервере скрипт, который запрашивает это содержимое, а затем используйте jQuery ajax, чтобы запустить скрипт на вашем сервере.

ответил Kevin B 21 FebruaryEurope/MoscowbThu, 21 Feb 2013 19:05:47 +0400000000pmThu, 21 Feb 2013 19:05:47 +040013 2013, 19:05:47
0

Просто поместите это в заголовок вашей 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");
}
ответил studio-klik 18 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 18 Sep 2017 01:08:38 +0300 2017, 01:08:38
0

Я публикую это на тот случай, если кто-то столкнется с той же проблемой, с которой я столкнулся прямо сейчас. У меня есть термопринтер 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-код запрашиваемой страницы возвращается и сохраняется в переменной data .

ответил user2177283 18 Maypm16 2016, 13:46:37
0

Чтобы получить данные с внешнего сайта путем передачи с использованием локального прокси-сервера, как предлагает 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

ответил Nitigya Sharma 22 J0000006Europe/Moscow 2016, 15:44:09
0

Вам нужен прокси-сервер 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>
ответил galeksandrp 2 J0000006Europe/Moscow 2016, 02:23:08
0

Разобрался. Использовал это вместо этого.

$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');
ответил user3279865 16 J0000006Europe/Moscow 2015, 15:45:23

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132