XMLHttpRequest Origin null không được phép Access-Control-allow-Origin cho tệp: /// thành tệp: /// (Serverless)

Tôi đang cố gắng tạo một trang web có thể tải xuống và chạy cục bộ bằng cách khởi chạy tệp chỉ mục của nó.

Tất cả các tệp là cục bộ, không có tài nguyên được sử dụng trực tuyến.

Khi tôi cố gắng sử dụng plugin AJAXSLT cho jQuery để xử lý tệp XML bằng mẫu XSL (trong các thư mục con), tôi nhận được các lỗi sau:

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/data/home.xml. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load file:///C:/path/to/XSL%20Website/assets/xsl/main.xsl. Origin null is not allowed by Access-Control-Allow-Origin.

Tệp chỉ mục thực hiện yêu cầu là file:///C:/path/to/XSL%20Website/index.htmltrong khi các tệp JavaScript được sử dụng được lưu trữ trong file:///C:/path/to/XSL%20Website/assets/js/.

Làm thế nào tôi có thể làm để khắc phục vấn đề này?

Đối với các trường hợp chạy máy chủ web cục bộ không phải là một tùy chọn, bạn có thể cho phép Chrome truy cập vào file://các tệp thông qua trình chuyển đổi trình duyệt. Sau khi đào bới, tôi tìm thấy cuộc thảo luận này , trong đó đề cập đến một chuyển đổi trình duyệt trong bài mở. Chạy phiên bản Chrome của bạn với:

chrome.exe --allow-file-access-from-files

Điều này có thể được chấp nhận cho các môi trường phát triển, nhưng ít khác. Bạn chắc chắn không muốn điều này mọi lúc. Đây vẫn là một vấn đề mở (kể từ tháng 1 năm 2011).

Xem thêm: Các sự cố với jQuery getJSON khi sử dụng các tệp cục bộ trong Chrome

Về cơ bản, cách duy nhất để giải quyết vấn đề này là có một máy chủ web chạy trên localhost và phục vụ chúng từ đó.

Không an toàn khi trình duyệt cho phép yêu cầu ajax truy cập bất kỳ tệp nào trên máy tính của bạn, do đó hầu hết các trình duyệt dường như coi các yêu cầu "tệp: //" là không có nguồn gốc cho mục đích " Chính sách xuất xứ tương tự "

Bắt đầu một máy chủ web có thể tầm thường như cdvào thư mục các tập tin đang và đang chạy:

python -m SimpleHTTPServer

Dưới đây là một applescript sẽ khởi chạy Chrome với công tắc --allow-file-access-from-files được bật, dành cho các nhà phát triển OSX / Chrome ngoài kia:

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"    
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

Giải pháp này sẽ cho phép bạn tải tập lệnh cục bộ bằng jQuery.getScript (). Đây là cài đặt toàn cầu nhưng bạn cũng có thể đặt tùy chọn tên miền chéo trên cơ sở mỗi yêu cầu.

$.ajaxPrefilter( "json script", function( options ) {
  options.crossDomain = true;
});

Điều gì về việc sử dụng chức năng FileReader của javascript để mở tệp cục bộ, nghĩa là:

<input type="file" name="filename" id="filename">
<script>
$("#filename").change(function (e) {
  if (e.target.files != undefined) {
    var reader = new FileReader();
    reader.onload = function (e) {
        // Get all the contents in the file
        var data = e.target.result; 
        // other stuffss................            
    };
    reader.readAsText(e.target.files.item(0));
  }
});
</script>

Bây giờ bấm vào Choose filenút và duyệt đến tập tinfile:///C:/path/to/XSL%20Website/data/home.xml

Khởi chạy chrome như vậy để bỏ qua hạn chế này : open -a "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --args --allow-file-access-from-files.

Xuất phát từ nhận xét của Josh Lee nhưng tôi cần chỉ định đường dẫn đầy đủ tới Google Chrome để tránh việc Google Chrome mở từ phân vùng Windows của tôi (trong Parallels).

Cách tôi chỉ giải quyết vấn đề này không phải là sử dụng XMLHTTPRequest, mà bao gồm dữ liệu cần thiết trong một tệp javascript riêng biệt. (Trong trường hợp của tôi, tôi cần một blob SQLite nhị phân để sử dụng với https://github.com/kripken/sql.js/ )

Tôi đã tạo một tệp có tên base64_data.js(và được sử dụng btoa()để chuyển đổi dữ liệu mà tôi cần và chèn nó vào <div>để tôi có thể sao chép nó).

var base64_data = "U1FMaXRlIGZvcm1hdCAzAAQA ...<snip lots of data> AhEHwA==";

và sau đó bao gồm dữ liệu trong html như javascript thông thường:

<div id="test"></div>

<script src="base64_data.js"></script>
<script>
    data = atob(base64_data);
    var sqldb = new SQL.Database(data);
    // Database test code from the sql.js project
    var test = sqldb.exec("SELECT * FROM Genre");
    document.getElementById("test").textContent = JSON.stringify(test);
</script>

Tôi tưởng tượng việc sửa đổi điều này để đọc JSON, thậm chí có thể là XML; Tôi sẽ để nó như một bài tập cho người đọc;)

Bạn có thể thử đưa 'Access-Control-Allow-Origin':'*'vào response.writeHead(, {[here]}).

sử dụng server máy chủ web cho ứng dụng chrome '. (bạn thực sự có nó trên máy tính của bạn, bạn có biết hay không. Chỉ cần tìm kiếm nó trong cortana!). mở nó và bấm vào 'chọn tập tin' chọn thư mục chứa tập tin của bạn trong đó. không thực sự chọn tập tin của bạn. chọn thư mục tệp của bạn, sau đó nhấp vào (các) liên kết dưới nút 'chọn thư mục'.

nếu nó không đưa bạn đến tập tin, sau đó thêm tên của tập tin vào urs. như thế này:

   https://127.0.0.1:8887/fileName.txt

liên kết đến máy chủ web cho chrome: nhấp vào tôi