jQuery Ajax Notes
- Из-за ограничений безопасности браузера большинство запросов Ajax подчиняются одной и той же политике происхождения ; запрос не может успешно получить данные из другого домена, субдомена, порта или протокола.
- На запросы сценариев и JSONP не распространяются одинаковые ограничения политики происхождения.
Есть несколько способов преодолеть междоменный барьер:
Есть несколько плагинов, которые помогают с междоменными запросами:
Берегись!
Лучший способ решить эту проблему - создать собственный прокси-сервер в серверной части, чтобы ваш прокси-сервер указывал на службы в других доменах, поскольку в серверной части не существует такого же ограничения политики происхождения . Но если вы не можете этого сделать в бэк-энде, обратите внимание на следующие советы.
Предупреждение!
Использование сторонних прокси-серверов не является безопасной практикой, поскольку они могут отслеживать ваши данные, поэтому их можно использовать с общедоступной информацией, но никогда с личными данными.
В приведенных ниже примерах кода используются jQuery.get () и jQuery.getJSON () , оба являются сокращенными методами jQuery.ajax ().
CORS везде
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 . Это альтернатива 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
Прокси- сервер CORS - это простой прокси-сервер node.js для включения запросов CORS для любого веб-сайта. Это позволяет коду javascript на вашем сайте получать доступ к ресурсам в других доменах, которые обычно блокируются из-за политики того же происхождения.
Как это работает? Прокси-сервер CORS использует совместное использование ресурсов между источниками, которое является функцией, которая была добавлена вместе с HTML 5. Серверы могут указать, что они хотят, чтобы браузеры разрешали другим веб-сайтам запрашивать ресурсы, которые они размещают. CORS Proxy - это просто 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
Получите исходный код на GitHub: koto / cors-proxy-browser