Yêu cầu AJAX chéo trang

Question

Tôi cần thực hiện yêu cầu AJAX từ trang web đến dịch vụ web REST được lưu trữ trong miền khác.

Mặc dù điều này chỉ hoạt động tốt trong Internet Explorer, các trình duyệt khác như Mozilla và Google Chrome áp đặt các giới hạn bảo mật nghiêm ngặt hơn, ngăn cấm các yêu cầu AJAX chéo trang.

Vấn đề là tôi không có quyền kiểm soát miền hoặc máy chủ web nơi trang web được lưu trữ. Điều này có nghĩa rằng dịch vụ web REST của tôi phải chạy ở một nơi khác và tôi không thể đặt bất kỳ cơ chế chuyển hướng nào.

Đây là đoạn mã JavaScript mà làm cho các cuộc gọi không đồng bộ:

var serviceUrl = "http://myservicedomain"; 
var payload = "<myRequest><content>Some content</content></myRequest>"; 
var request = new XMLHttpRequest(); 
request.open("POST", serviceUrl, true); // <-- This fails in Mozilla Firefox amongst other browsers 
request.setRequestHeader("Content-type", "text/xml"); 
request.send(payload); 

Làm thế nào tôi có thể có công việc này trong các trình duyệt khác bên cạnh Internet Explorer?

Answer 1

có thể JSONP có thể trợ giúp.

NB bạn sẽ phải thay đổi thông điệp của bạn để sử dụng json thay vì xml

Sửa

các trang web lớn như Flickr và twitter hỗ trợ jsonp với callbacks vv

Answer 2

Việc này làm việc trong IE là một vấn đề bảo mật với IE, không phải là một tính năng.

Thật không may là việc tạo mã cross-site bị cấm và công việc được chấp nhận xung quanh là ủy quyền các yêu cầu thông qua miền của riêng bạn: bạn có thực sự không có khả năng thêm hoặc sửa đổi mã phía máy chủ không? Hơn nữa, cách giải quyết thứ hai - liên quan đến việc thu thập dữ liệu thông qua thẻ tập lệnh - chỉ hỗ trợ các yêu cầu GET mà bạn có thể hack với dịch vụ SOAP, nhưng không quá nhiều với yêu cầu POST tới RESTful dịch vụ bạn mô tả.

Tôi thực sự không chắc chắn giải pháp AJAX tồn tại, bạn có thể quay lại giải pháp < mẫu >.

Answer 3

Cách giải quyết không rõ ràng (nhưng hoạt động) đang sử dụng iframe làm vùng chứa cho các yêu cầu đến một trang web khác. Vấn đề là, cha mẹ không thể truy cập nội dung của khung nội tuyến, chỉ có thể điều hướng thuộc tính "src" của khung nội tuyến. Nhưng nội dung iframe có thể truy cập nội dung của cha mẹ.

Vì vậy, nếu nội dung của khung nội tuyến biết, họ có thể gọi một số nội dung javascript trong trang gốc hoặc truy cập trực tiếp vào DOM của cha mẹ.

EDIT: mẫu:

function ajaxWorkaroung() { 
    var frm = gewtElementById("myIFrame") 
    frm.src = "http://some_other_domain" 
} 
function ajaxCallback(parameter){ 
    // this function will be called from myIFrame's content 
} 

Answer 4

Các bài đánh dấu là câu trả lời là sai lầm: tài liệu iframe là không thể truy cập vào cha mẹ. Chính sách gốc tương tự cũng hoạt động theo cả hai cách.

Thực tế là không thể thực hiện bất kỳ cách nào để sử dụng dịch vụ web dựa trên phần còn lại bằng cách sử dụng xmlhttprequest. Cách duy nhất để tải dữ liệu từ một miền khác (không có bất kỳ khung công tác nào) là sử dụng JSONP. Bất kỳ giải pháp nào khác đều yêu cầu proxy serveride nằm trên tên miền của riêng bạn hoặc proxy bên ứng dụng nằm trên miền từ xa và loại giao tiếp chéo trang web (như easyXDM) để giao tiếp giữa các tài liệu.

Answer 5

Chỉ cần sử dụng proxy phía máy chủ trên miền gốc của bạn. Dưới đây là ví dụ: http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html

Answer 6

Làm cho miền dịch vụ của bạn chấp nhận chia sẻ nguồn gốc chéo (CORS).

Kịch bản điển hình: Hầu hết các trình duyệt tương thích CORS trước tiên sẽ gửi tiêu đề OPTIONS, trong đó máy chủ sẽ trả về thông tin về các tiêu đề được chấp nhận. Nếu tiêu đề đáp ứng các yêu cầu của dịch vụ cho yêu cầu được cung cấp (Các phương thức được phép là GET và POST, Được phép xuất xứ *, vv), thì trình duyệt sẽ gửi lại yêu cầu với phương thức thích hợp (GET, POST, v.v.).

Mọi thứ mà điểm này chuyển tiếp giống như khi bạn đang sử dụng IE, hoặc đơn giản hơn, nếu bạn đã đăng lên cùng một miền.

Caviots: Một số phát triển dịch vụ của SDK (WCF nói riêng) sẽ xử lý yêu cầu, trong trường hợp này bạn cần phải xử lý trước phương pháp OPTIONS để trả lời yêu cầu và tránh phương thức được gọi hai lần trên máy chủ.

Tóm lại, sự cố nằm ở phía máy chủ.

Chỉnh sửa Có một vấn đề với IE 9 trở xuống với CORS, ở chỗ nó không được triển khai đầy đủ. May mắn thay, bạn có thể giải quyết vấn đề này bằng cách thực hiện cuộc gọi từ mã phía máy chủ đến dịch vụ và đưa nó trở lại thông qua máy chủ của bạn (ví dụ: mypage.aspx? Service = blah & method = blahblah & p0 = firstParam = something). Từ đây, mã phía máy chủ của bạn nên triển khai mô hình luồng yêu cầu/phản hồi.

Answer 7

Điều này cũng có thể được thực hiện bằng cách sử dụng thiết lập máy chủ web localy gọi curl với các đối số chính xác và trả về đầu ra curl.

app.rb

require 'sinatra' 
require 'curb' 

set :views,lambda {"views/"+self.name.to_s.downcase.sub("controller","")} 
set :haml, :layout => :'../layout', :format => :html5, :escape_html=>true 
disable :raise_errors 

get '/data/:brand' do 
    data_link = "https://externalsite.com/#{params[:brand]}" 
    c = Curl::Easy.perform(data_link) 
    c.body_str 
end 

Gửi một yêu cầu ajax với localhost: 4567/data/cái gì đó sẽ trả về kết quả từ externalsite.com/something.

Answer 8

Tùy chọn khác sẽ là thiết lập bản ghi CNAME trên miền của riêng bạn thành "Mặt nạ" tên miền máy chủ từ xa.