jQuery Ajax笔记 由于浏览器安全性的限制,大多数Ajax请求都遵循相同的原始策略;该请求无法成功从其他域,子域,端口或协议检索数据。 脚本和JSONP请求不受相同的原始策略限制。 有一些方法可以克服跨域障碍:
有一些插件可帮助处理跨域请求:
当心!
克服此问题的最佳方法是,在后端创建自己的代理,以便你的代理将指向其他域中的服务,因为在后端中不存在相同的原始策略限制。但是,如果你不能在后端执行此操作,请注意以下提示。
警告! 使用第三方代理不是安全的做法,因为它们可以跟踪你的数据,因此可以与公共信息一起使用,但绝不能与私有数据一起使用。
下面显示的代码示例使用jQuery.get(
)和jQuery.getJSON()
,它们都是jQuery.ajax()
的简写方法。
CORS Anywhere是一个node.js代理,它将CORS标头添加到代理请求中。 要使用API??,只需在URL前面加上API URL。(支持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的开源替代方案。
// 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是一个简单的node.js代理,可为任何网站启用CORS请求。它允许你站点上的javascript代码访问其他域上的资源,这些资源通常由于同源策略而被阻止。
它是如何工作的?CORS Proxy利用了跨域资源共享功能,该功能是随HTML 5一起添加的。服务器可以指定它们希望浏览器允许其他网站请求其托管的资源。CORS代理只是一个HTTP代理,它在响应中添加一个标头,说“任何人都可以请求”。
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
CORS代理浏览器 最近,我发现了这个,它涉及各种面向安全性的跨源远程共享实用程序。但这是一个以Flash为后端的黑盒子。