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 Proxy - це простий проксі-сервер node.js для включення запиту CORS для будь-якого веб-сайту. Це дозволяє коду Javascript на вашому веб-сайті отримати доступ до ресурсів інших доменів, які зазвичай були б заблоковані через політику того самого походження.
Як це працює? CORS Proxy використовує перевагу крос-походження ресурсів спільного доступу, що є функцією, доданою разом із 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