библиотека jQuery доменный AJAX-кросс

вот две страницы, тест.php и testserver.РНР.

444
ajax cross-domain javascript jquery json

14 ответов

использовать JSONP.

jQuery:

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

PHP:

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>

эхо может быть неправильным, прошло некоторое время с тех пор, как я использовал php. В любом случае вам нужно вывести callbackName('jsonString') обратите внимание на кавычки. jQuery передаст свое собственное имя обратного вызова, поэтому вам нужно получить это из GET params.

и как написал Стефан Кендалл,$.помощью метода getjson() это метод стенографии, но тогда вам нужно добавить 'callback=?' к url как параметр GET (да, ценность есть ?, jQuery заменяет это своим собственным сгенерированным методом обратного вызова).

395

JSONP-хороший вариант, но есть более простой способ. Вы можете просто установить Access-Control-Allow-Origin заголовок на вашем сервере. Установка его в * будет принимать междоменные запросы AJAX из любого домена. (https://developer.mozilla.org/en/http_access_control)

метод для этого варьируется от языка к языку, конечно. Вот он в рельсах:

class HelloController < ApplicationController
  def say_hello
    headers['Access-Control-Allow-Origin'] = "*"
    render text: "hello!"
  end
end

в этом примере say_hello action будет принимать запросы AJAX из любого домена и возвращать Ответ: "Здравствуйте!".

вот пример заголовков, которые он может вернуть:

HTTP/1.1 200 OK 
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
X-Ua-Compatible: IE=Edge
Etag: "c4ca4238a0b923820dcc509a6f75849b"
X-Runtime: 0.913606
Content-Length: 6
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
Date: Thu, 01 Mar 2012 20:44:28 GMT
Connection: Keep-Alive

легко, как это, у него есть некоторые ограничения браузера. См.http://caniuse.com/#feat=cors.

195

вы можете управлять этим через HTTP-заголовок, добавив Access-Control-Allow-Origin. Установка его в * будет принимать междоменные запросы AJAX из любого домена.

С помощью PHP Это очень просто, просто добавьте следующую строку в скрипт, который вы хотите иметь доступ к за пределами вашего домена:

header("Access-Control-Allow-Origin: *");

Не забудьте включить модуль mod_headers в httpd.conf.

28

вам нужно взглянуть на Та Же Политика Происхождения:

в вычислениях та же политика происхождения это важная концепция безопасности количество веб-программирование языки, такие как JavaScript. Этот политика разрешает выполнение сценариев страницы, происходящие с одного сайта для доступа к методам друг друга и свойства без конкретного ограничений, но предотвращает доступ к большинство методов и свойств страницы на разных места.

для того, чтобы вы могли получить данные, это должно быть:

тот же протокол и хост

нужно реализовать JSONP чтобы обойти его.

19

мне пришлось загрузить веб-страницу с локального диска " файл: / //C: / test / htmlpage.html", вызов "http://localhost/getxml - ... PHP " url, и сделайте это в браузерах IE8+ и Firefox12+, используйте jQuery v1.7.2 lib для минимизации кода шаблона. Прочитав десятки статей, наконец-то понял. Вот мое резюме.

  • серверный скрипт (.РНР. ,JSP-страница. ,..) должен возвращать заголовок http-ответа Access-Control-Allow-Origin:*
  • перед использованием jQuery ajax установите этот флаг в javascript: на jQuery.поддержка.cors = true;
  • вы можете установить флаг один раз или каждый раз перед использованием функции jQuery ajax
  • теперь я могу читать .xml-документ в IE и Firefox. Другие браузеры я не тестировал.
  • документ ответа может быть простым / text, xml, json или что-нибудь еще

вот пример вызова jQuery ajax с некоторыми отладочными sysouts.

jQuery.support.cors = true;
$.ajax({
    url: "http://localhost/getxml.php",
    data: { "id":"doc1", "rows":"100" },
    type: "GET",
    timeout: 30000,
    dataType: "text", // "xml", "json"
    success: function(data) {
        // show text reply as-is (debug)
        alert(data);

        // show xml field values (debug)
        //alert( $(data).find("title").text() );

        // loop JSON array (debug)
        //var str="";
        //$.each(data.items, function(i,item) {
        //  str += item.title + "\n";
        //});
        //alert(str);
    },
    error: function(jqXHR, textStatus, ex) {
        alert(textStatus + "," + ex + "," + jqXHR.responseText);
    }
});
16

верно, что политика того же происхождения запрещает JavaScript делать запросы через домены, но спецификация CORS позволяет только вид доступа API, который вы ищете, и поддерживается текущей партией основных браузеров.

см. Как включить общий доступ к ресурсам cross-origin для клиента и сервера:

http://enable-cors.org/

" Cross-Origin Resource Sharing (CORS) - это спецификация, которая обеспечивает действительно открытый доступ через доменные границы. Если вы обслуживаете публичный контент, рассмотрите возможность использования CORS для его открытия для универсального доступа JavaScript/браузера."

10

это возможно, но вам нужно использовать JSONP, а не JSON. Линк Стефана указал тебе правильное направление. The страница jQuery AJAX имеет больше информации о JSONP.

у Реми Шарпа есть подробный пример использования PHP.

9

Я использую сервер Apache, поэтому я использовал модуль mod_proxy. Включить модули:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

потом добавил:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

наконец, передайте прокси-url вашему скрипту.

9

безопасность браузера предотвращает вызов ajax со страницы, размещенной в одном домене, на страницу, размещенную в другом домене; это называется"политика того же происхождения".

8

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

однако обратите внимание, что событие error-event не запускается при использовании JSONP! Смотри:http://api.jquery.com/jQuery.ajax/ или jQuery ajax запрос с использованием ошибки jsonp

5

из документов Jquery (ссылке):

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

  • запросы Script и JSONP не подпадают под те же ограничения политики происхождения.

поэтому я бы предположил, что вам нужно использовать jsonp для запроса. Но сам не пробовал.

4

Я знаю 3 способа решения проблемы:

  1. во-первых, если у вас есть доступ к обоим доменам, вы можете разрешить доступ ко всем другим доменам, используя:

    header("Access-Control-Allow-Origin: *");

    или просто домен, добавив код ниже .файл htaccess:

    <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.net|dev02.otherdomain.net)$" AccessControlAllowOrigin= Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin </IfModule> </FilesMatch>

  2. вы можете иметь ajax-запрос к php-файлу на вашем сервере и обрабатывать запрос к другому домену, используя этот php-файл.

  3. вы можете использовать jsonp , потому что для этого не нужно разрешение. для этого вы можете прочитать наш друг @BGerrissen ответ.
1

для Microsoft Azure это немного отличается.

Azure имеет специальный параметр CORS, который необходимо установить. Это по сути то же самое за кулисами, но просто установка заголовка, о котором упоминает джошуарх, не будет работать. Документацию Azure для включения кросс-домена можно найти здесь:

https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

я возился с это в течение нескольких часов, прежде чем понять, что моя хостинг-платформа имела эту специальную настройку.

0

это работает, все, что вам нужно:

PHP:

header('Access-Control-Allow-Origin: http://www.example.com');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

JS (jQuery ajax):

var getWBody = $.ajax({ cache: false,
        url: URL,
        dataType : 'json',
        type: 'GET',
        xhrFields: { withCredentials: true }
});
0