библиотека jQuery доменный AJAX-кросс
вот две страницы, тест.php и testserver.РНР.
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 заменяет это своим собственным сгенерированным методом обратного вызова).
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.
вы можете управлять этим через HTTP-заголовок, добавив Access-Control-Allow-Origin. Установка его в * будет принимать междоменные запросы AJAX из любого домена.
С помощью PHP Это очень просто, просто добавьте следующую строку в скрипт, который вы хотите иметь доступ к за пределами вашего домена:
header("Access-Control-Allow-Origin: *");
Не забудьте включить модуль mod_headers в httpd.conf.
вам нужно взглянуть на Та Же Политика Происхождения:
в вычислениях та же политика происхождения это важная концепция безопасности количество веб-программирование языки, такие как JavaScript. Этот политика разрешает выполнение сценариев страницы, происходящие с одного сайта для доступа к методам друг друга и свойства без конкретного ограничений, но предотвращает доступ к большинство методов и свойств страницы на разных места.
для того, чтобы вы могли получить данные, это должно быть:
тот же протокол и хост
нужно реализовать JSONP чтобы обойти его.
мне пришлось загрузить веб-страницу с локального диска " файл: / //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);
}
});
верно, что политика того же происхождения запрещает JavaScript делать запросы через домены, но спецификация CORS позволяет только вид доступа API, который вы ищете, и поддерживается текущей партией основных браузеров.
см. Как включить общий доступ к ресурсам cross-origin для клиента и сервера:
" Cross-Origin Resource Sharing (CORS) - это спецификация, которая обеспечивает действительно открытый доступ через доменные границы. Если вы обслуживаете публичный контент, рассмотрите возможность использования CORS для его открытия для универсального доступа JavaScript/браузера."
это возможно, но вам нужно использовать JSONP, а не JSON. Линк Стефана указал тебе правильное направление. The страница jQuery AJAX имеет больше информации о JSONP.
у Реми Шарпа есть подробный пример использования PHP.
Я использую сервер 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 вашему скрипту.
безопасность браузера предотвращает вызов ajax со страницы, размещенной в одном домене, на страницу, размещенную в другом домене; это называется"политика того же происхождения".
существует несколько примеров использования JSONP, которые включают обработку ошибок.
однако обратите внимание, что событие error-event не запускается при использовании JSONP! Смотри:http://api.jquery.com/jQuery.ajax/ или jQuery ajax запрос с использованием ошибки jsonp
из документов Jquery (ссылке):
из-за ограничений безопасности браузера большинство запросов "Ajax" подчиняются одной и той же политике происхождения; запрос не может успешно извлекать данные из другого домена, поддомена или протокола.
запросы Script и JSONP не подпадают под те же ограничения политики происхождения.
поэтому я бы предположил, что вам нужно использовать jsonp для запроса. Но сам не пробовал.
Я знаю 3 способа решения проблемы:
-
во-первых, если у вас есть доступ к обоим доменам, вы можете разрешить доступ ко всем другим доменам, используя:
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>
вы можете иметь ajax-запрос к php-файлу на вашем сервере и обрабатывать запрос к другому домену, используя этот php-файл.
- вы можете использовать jsonp , потому что для этого не нужно разрешение. для этого вы можете прочитать наш друг @BGerrissen ответ.
для Microsoft Azure это немного отличается.
Azure имеет специальный параметр CORS, который необходимо установить. Это по сути то же самое за кулисами, но просто установка заголовка, о котором упоминает джошуарх, не будет работать. Документацию Azure для включения кросс-домена можно найти здесь:
https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript
я возился с это в течение нескольких часов, прежде чем понять, что моя хостинг-платформа имела эту специальную настройку.
это работает, все, что вам нужно:
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 }
});