Ghi chú jQuery jQuery
- Do các hạn chế bảo mật của trình duyệt, hầu hết các yêu cầu Ajax đều phải tuân theo cùng một chính sách xuất xứ ; yêu cầu không thể truy xuất thành công dữ liệu từ một tên miền, tên miền phụ, cổng hoặc giao thức khác nhau.
- Các yêu cầu Script và JSONP không bị hạn chế chính sách gốc.
Có một số cách để vượt qua rào cản tên miền chéo :
Có một số plugin giúp yêu cầu tên miền chéo :
Đứng lên!
Cách tốt nhất để khắc phục vấn đề này là bằng cách tạo proxy của riêng bạn ở back-end, để proxy của bạn sẽ trỏ đến các dịch vụ trong các miền khác, bởi vì trong back-end không tồn tại cùng một hạn chế chính sách gốc . Nhưng nếu bạn không thể làm điều đó trong back-end, thì hãy chú ý đến các mẹo sau.
Cảnh báo!
Sử dụng proxy của bên thứ ba không phải là một cách an toàn, bởi vì họ có thể theo dõi dữ liệu của bạn, vì vậy nó có thể được sử dụng với thông tin công khai, nhưng không bao giờ với dữ liệu riêng tư.
Các ví dụ mã được hiển thị bên dưới sử dụng jQuery.get () và jQuery.getJSON () , cả hai đều là các phương thức tốc ký của jQuery.ajax ()
CORS bất cứ nơi nào
CORS Anywhere là proxy node.js bổ sung các tiêu đề CORS vào yêu cầu ủy quyền.
Để sử dụng API, chỉ cần thêm tiền tố URL với URL API. (Hỗ trợ https : xem kho lưu trữ github )
Nếu bạn muốn tự động kích hoạt các yêu cầu tên miền chéo khi cần, hãy sử dụng đoạn mã sau:
$.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);
});
Dù xuất xứ gì
Bất cứ nguồn gốc nào là truy cập jsonp tên miền chéo . Đây là một nguồn mở thay thế cho anyorigin.com .
Để tìm nạp dữ liệu từ google.com, bạn có thể sử dụng đoạn mã này:
// 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);
});
Proxy CORS
CORS Proxy là một proxy node.js đơn giản để kích hoạt yêu cầu CORS cho bất kỳ trang web nào. Nó cho phép mã javascript trên trang web của bạn truy cập tài nguyên trên các tên miền khác thường bị chặn do chính sách cùng nguồn gốc.
Làm thế nào nó hoạt động? CORS Proxy tận dụng Chia sẻ tài nguyên nguồn gốc chéo, đây là một tính năng được thêm vào cùng với HTML 5. Máy chủ có thể chỉ định rằng họ muốn trình duyệt cho phép các trang web khác yêu cầu tài nguyên mà họ lưu trữ. CORS Proxy chỉ đơn giản là một Proxy HTTP có thêm tiêu đề cho các phản hồi với nội dung "bất kỳ ai cũng có thể yêu cầu điều này".
Đây là một cách khác để đạt được mục tiêu (xem www.corsproxy.com ). Tất cả bạn phải làm là dải http: // và www. từ URL được ủy quyền và thêm URL vớiwww.corsproxy.com/
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Trình duyệt proxy CORS
Gần đây tôi tìm thấy cái này, nó liên quan đến các tiện ích Chia sẻ từ xa theo định hướng bảo mật khác nhau. Nhưng nó là một hộp đen với Flash là phụ trợ.
Bạn có thể thấy nó hoạt động ở đây: Trình duyệt proxy CORS
Lấy mã nguồn trên GitHub: koto / cors-proxy-browser