REST API hoạt động như thế nào với javascript khi có chính sách nguồn gốc tên miền cho trình duyệt?

Question

tôi đang làm việc với Flickr API REST và nó hoạt động tốt, do đó tôi có nghĩa là tôi thực hiện cuộc gọi AJAX API Flickr, tôi nhận được một đối tượng JSON, tôi phân tích các đối tượng vv

Nhưng bây giờ tôi có câu hỏi: nếu trình duyệt theo dõi Same_origin_policy, làm cách nào chúng tôi có thể yêu cầu loại API này?

This DEMO công trình nhưng nó gửi một yêu cầu chéo miền vào miền Flickr

Bất kỳ một thể cho tôi biết làm thế nào chéo miền công việc yêu cầu này?

tên miền chéo Yêu cầu

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=" + id + "&lang=en-us&format=json&jsoncallback=1"); 

Answer 1

Những gì bạn cần phải hiểu là, trong khi các trình duyệt làm thực thi các chính sách cùng một nguồn gốc (SOP), có những trường hợp ngoại lệ khi SOP là không được thực thi. Ví dụ: nếu bạn có trang HTML - bạn có thể chèn các thẻ <img> trỏ đến hình ảnh trên bất kỳ tên miền nào. Do đó, SOP không áp dụng ở đây và bạn đang thực hiện yêu cầu HTTP GET có nguồn gốc chéo cho một hình ảnh.

Bản giới thiệu bạn đã liên kết với các tác phẩm vì nó sử dụng cơ chế hoạt động theo cách tương tự. Cơ chế này được gọi là JSONP - http://en.wikipedia.org/wiki/JSONP và tôi khuyên bạn nên đọc mục nhập wiki và một số bài đăng trên blog khác. Về bản chất, JSONP tự động tiêm các thẻ <script> để gửi yêu cầu tới bất kỳ miền nào (thông số của yêu cầu được thêm làm thông số truy vấn URL), vì chính sách gốc tương tự không áp dụng cho các thẻ <script> (vì nó không áp dụng cho các thẻ <img>)).

Một cách khác để gọi API REST trên các miền khác là sử dụng cơ chế chia sẻ tài nguyên gốc (CORS) - http://en.wikipedia.org/wiki/Cross-origin_resource_sharing. Về bản chất, cơ chế này cho phép các trình duyệt không từ chối yêu cầu xuất xứ chéo, mà là yêu cầu dịch vụ đích nếu nó muốn cho phép một yêu cầu có nguồn gốc chéo cụ thể. Dịch vụ đích cho trình duyệt biết rằng nó muốn cho phép các yêu cầu có nguồn gốc chéo bằng cách chèn tiêu đề HTTP đặc biệt vào câu trả lời:

Access-Control-Allow-Origin: http://www.example.com