CORS, Cordova, AngularJs $ http và file: // nhầm lẫn

Question

Tôi có một ứng dụng AngularJS/Cordova mà các cuộc thăm dò một dịch vụ JSON trên một máy chủ từ xa:

$http({method: 'GET', url: 'http://example.com/index.php'}) 

đang phát triển trong trình duyệt và chạy ra khỏi tôi intranet apache máy chủ (http://dev) tôi nhận được "Không 'Access-Control-Allow-Origin' tiêu đề là hiện tại" vì vậy tôi sửa lỗi này bằng cách thêm:

Header set Access-Control-Allow-Origin "http://dev" 

Tất cả hoạt động tốt, và tôi thấy Origin:http://dev trong các công cụ dev Chrome của tôi.

Vì vậy, phải suy nghĩ về điều này lần đầu tiên, tôi tự hỏi nguồn gốc sẽ là gì khi ứng dụng chạy trong các bản xem trước web trên Android/iOS. Tôi quyết định xây dựng và triển khai trên thiết bị của mình và hy vọng sẽ gặp lỗi tương tự trong gỡ lỗi từ xa (Safari cho iOS và Weinre dành cho Android), nhưng tôi ngạc nhiên khi nó hoạt động (không gửi bất kỳ tiêu đề CORS nào)! Tôi cũng thấy rằng trong cả hai thiết bị, ứng dụng chạy trong webview theo tệp: // scheme, thay vì (những gì tôi giả định) một máy chủ http của một số loại được cung cấp bởi hệ điều hành điện thoại.

Vì vậy, nghiên cứu dường như gợi ý rằng CORS không bắt buộc đối với tệp: // - một "trang web" có thể truy cập bất kỳ tài nguyên XHR nào trên bất kỳ tên miền nào. cần CORS cho file: // nhưng với Chrome và FireFox làm việc một trong hai cách mà không CORS

vì vậy, câu hỏi của tôi:

1) tại sao ứng dụng của tôi làm việc mà không CORS trong Android/iOS - chẳng qua là vì CORS không áp dụng cho tập tin: //, hoặc, là Cordova đang làm gì đó để nó hoạt động trong thiết bị?

Tôi có <access origin="*"/> trong cấu hình của mình

2) nếu, đang chờ câu trả lời cho Q1, tôi muốn ở trên trang web an toàn và cho phép yêu cầu từ ứng dụng một cách rõ ràng, bạn cho Access-Control-Allow-Origin cho tệp: // "máy chủ" là giá trị nào? trong quá trình gỡ lỗi, không có tiêu đề Gốc trong các yêu cầu từ tệp: //

3) ngoài việc chặn yêu cầu XHR đến máy chủ từ xa, Chrome cũng đang chặn mẫu ứng dụng của tôi (Tôi đang sử dụng các tệp riêng biệt), xem bên dưới. Đây có phải là sự cố tiềm ẩn với ứng dụng của tôi hay chỉ là sự cố Chrome mà tôi không cần phải lo lắng?

XMLHttpRequest cannot load file:///Volumes/projects/phonegap/www/templates/tabs.html. Cross origin requests are only supported for HTTP. 

Answer 1

Có hai cách cho tiêu đề CORS để báo hiệu rằng một XHR cross-domain được phép:

• gửi Access-Control-Allow-Origin: * (cho phép tất cả các host)
• đặt máy chủ mà bạn muốn cho phép vào tiêu đề Origin bởi chương trình phụ trợ của bạn

Đối với các file:// URL, chúng sẽ tạo ra nullOrigin không thể ủy quyền thông qua tùy chọn thứ hai (echo-back).

Như mentioned:

chính sách Cross-miền không áp dụng cho PhoneGap (cho một loạt các lý do, về cơ bản bởi vì ứng dụng của bạn về cơ bản chạy ra khỏi file: // URI trên thiết bị).

Xin lưu ý rằng bạn sẽ phải thiết lập danh sách trắng cho các ứng dụng của mình để truy cập các miền bên ngoài này.

Đối với Chrome vấn đề , có thể được nhìn thấy trong giao diện điều khiển của nhà phát triển:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/2.html XMLHttpRequest cannot load file:///C:/2.html. Received an invalid response. Origin 'null' is therefore not allowed access.

đã có một cuộc thảo luận về Chromium project's issue tracker, #40787. Họ đánh dấu các vấn đề là sẽ không sửa lỗi vì hành vi đó đang xảy ra theo thiết kế.

Có một workaround đề xuất chỉ đơn giản là tắt CORS trong Chrome cho các mục đích phát triển, bắt đầu chrome với --allow-file-access-from-files --disable-web-security

ví dụ cho Windows

`C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security` 

Dưới đây là một số câu trả lời liên quan cordova hơn:

• CORS and phonegap apps
• Domain whitelisting in Apache Cordova - một mô hình bảo mật điều khiển truy cập vào các lĩnh vực bên ngoài.

Kiểm tra các nguồn lực này để biết thêm về CORS:

• Cross-Origin resource sharing and file://
• A nice CORS tutorial: http://www.html5rocks.com/en/tutorials/cors/
• Working around origin policy
• HTTP access control (CORS) (Mozilla)

Kiểm tra cũng Trình duyệt hỗ trợ cho CORS:

• http://caniuse.com/#feat=cors

Và đối với những kỷ lục formal CORS specification on W3C :)