Nguồn gốc null không được cho phép bởi Access-Control-Cho phép Xuất xứ

Tôi đã tạo một tệp xslt nhỏ để tạo đầu ra html có tên là Weather.xsl với mã như sau:

<!-- DWXMLSource="http://weather.yahooapis.com/forecastrss?w=38325&u=c" -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
exclude-result-prefixes="yweather"
xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>

<xsl:template match="/">
    <img src="{/*/*/item/yweather:condition/@text}.jpg"/>
</xsl:template>
</xsl:stylesheet>

Tôi muốn tải đầu ra html vào div trong tệp html mà tôi đang cố gắng sử dụng jQuery như sau:

<div id="result">
<script type="text/javascript">
$('#result').load('weather.xsl');
</script>
</div>

Nhưng tôi gặp phải lỗi sau: Origin null không được cho phép bởi Access-Control-Allow-Origin.

Tôi đã đọc về việc thêm tiêu đề vào xslt, nhưng tôi không chắc làm thế nào để làm điều đó, vì vậy mọi trợ giúp đều được đánh giá cao và nếu việc tải vào tệp ouput html không thể được thực hiện theo cách này, thì hãy tư vấn về cách khác để làm điều đó sẽ là tuyệt vời.

Origin nulllà hệ thống tệp cục bộ, do đó, gợi ý rằng bạn đang tải trang HTML thực hiện loadcuộc gọi qua file:///URL (ví dụ: chỉ cần nhấp đúp vào nó trong trình duyệt tệp cục bộ hoặc tương tự). Các trình duyệt khác nhau thực hiện các cách tiếp cận khác nhau để áp dụng Chính sách nguồn gốc giống nhau cho các tệp cục bộ.

Tôi đoán là bạn đang thấy điều này bằng Chrome. Các quy tắc của Chrome để áp dụng SOP cho các tệp cục bộ rất chặt chẽ, nó không cho phép tải các tệp từ cùng thư mục với tài liệu. Opera cũng vậy. Một số trình duyệt khác, chẳng hạn như Firefox, cho phép truy cập hạn chế vào các tệp cục bộ. Nhưng về cơ bản, sử dụng ajax với tài nguyên cục bộ sẽ không hoạt động trên nhiều trình duyệt.

Nếu bạn chỉ đang thử nghiệm một cái gì đó cục bộ mà bạn thực sự sẽ triển khai trên web, thay vì sử dụng các tệp cục bộ, hãy cài đặt một máy chủ web đơn giản và kiểm tra qua http://URL thay thế. Điều đó cung cấp cho bạn một hình ảnh bảo mật chính xác hơn nhiều.

Chrome và Safari có một hạn chế trong việc sử dụng ajax với tài nguyên cục bộ. Đó là lý do tại sao nó ném một lỗi như

Nguồn gốc null không được cho phép bởi Access-Control-Cho phép Xuất xứ.

Giải pháp: Sử dụng firefox hoặc tải dữ liệu của bạn lên máy chủ tạm thời. Nếu bạn vẫn muốn sử dụng Chrome, hãy khởi động nó với tùy chọn bên dưới;

--allow-file-access-from-files

Thông tin thêm về cách thêm tham số trên vào Chrome của bạn: Nhấp chuột phải vào biểu tượng Chrome trên thanh tác vụ, nhấp chuột phải vào Google Chrome trên cửa sổ bật lên và nhấp vào các thuộc tính và thêm tham số bên trên vào hộp văn bản Target trong tab Shortcut. Nó sẽ như dưới đây;

C:\Users\XXX_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

Hy vọng điều này sẽ giúp!

Chỉ muốn thêm rằng câu trả lời "chạy máy chủ web" có vẻ khá nan giải, nhưng nếu bạn có python trên hệ thống của mình (được cài đặt mặc định ít nhất là trên MacOS và bất kỳ bản phân phối Linux nào) thì cũng dễ dàng như sau:

python -m http.server  # with python3

hoặc là

python -m SimpleHTTPServer  # with python2

Vì vậy, nếu bạn có tệp html của mình myfile.htmltrong một thư mục, giả sử mydir, tất cả những gì bạn phải làm là:

cd /path/to/mydir
python -m http.server  # or the python2 alternative above

Sau đó trỏ trình duyệt của bạn tới:

http://localhost:8000/myfile.html

Và bạn đã hoàn thành! Hoạt động trên tất cả các trình duyệt , mà không vô hiệu hóa bảo mật web, cho phép các tệp cục bộ hoặc thậm chí khởi động lại trình duyệt với các tùy chọn dòng lệnh.

Tôi muốn khiêm tốn thêm rằng theo nguồn SO này: https://stackoverflow.com/a/14671362/1743693 , loại rắc rối này hiện đã được giải quyết một phần chỉ bằng cách sử dụng hướng dẫn jQuery sau:

<script> 
    $.support.cors = true;
</script>

Tôi đã thử nó trên IE10.0.9200 và nó đã hoạt động ngay lập tức (sử dụng jquery-1.9.0.js).

Trên chrome 28.0.1500.95 - hướng dẫn này không hoạt động (điều này xảy ra hoàn toàn dưới dạng david phàn nàn trong các nhận xét tại liên kết ở trên)

Chạy chrome với --allow-file-access-from-files không hoạt động với tôi (như tuyên bố của Maistora ở trên)

Thêm một chút để sử dụng giải pháp của Gokhan để sử dụng:

--allow-file-access-from-files

Bây giờ bạn chỉ cần nối thêm văn bản trên vào văn bản Target theo sau là khoảng trắng. đảm bảo bạn đóng tất cả các phiên bản của trình duyệt chrome sau khi thêm thuộc tính trên. Bây giờ khởi động lại chrome bởi biểu tượng nơi bạn đã thêm thuộc tính này. Nó nên làm việc cho tất cả.

Tôi đang tìm kiếm một giải pháp để thực hiện một yêu cầu XHR đến một máy chủ từ tệp html cục bộ và tìm thấy một giải pháp sử dụng Chrome và PHP. (không có Jquery)

Các bản mô tả:

var x = new XMLHttpRequest(); 
if(x) x.onreadystatechange=function(){ 
    if (x.readyState === 4 && x.status===200){
        console.log(x.responseText); //Success
    }else{ 
        console.log(x); //Failed
    }
};
x.open(GET, 'http://example.com/', true);
x.withCredentials = true;
x.send();

Tiêu đề yêu cầu của Chrome của tôi Origin: null

Tiêu đề phản hồi PHP của tôi (Lưu ý rằng 'null' là một chuỗi ). HTTP_REFERER cho phép xuất xứ chéo từ máy chủ từ xa sang máy chủ khác.

header('Access-Control-Allow-Origin: '.(trim($_SERVER['HTTP_REFERER'],'/')?:'null'),true);
header('Access-Control-Allow-Credentials:true',true);

Tôi đã có thể kết nối thành công với máy chủ của tôi. Bạn có thể bỏ qua các tiêu đề Thông tin xác thực, nhưng điều này hiệu quả với tôi với ApacheAuthType Basic bật tính năng

Tôi đã thử nghiệm khả năng tương thích với FF và Opera, Nó hoạt động trong nhiều trường hợp như:

Từ một VM LAN IP (192.168.0.x) trở lại IP của mạng LAN (mạng công cộng)
VM : Từ một VM LAN IP trở lại một tên miền máy chủ từ xa.
Từ tệp .HTML cục bộ đến VM LAN IP và / hoặc VM WAN IP: port,
Từ tệp .HTML cục bộ sang tên miền máy chủ từ xa.
Và như thế.

Bạn có thể tải tệp Javascript cục bộ (trong cây bên dưới file:/trang nguồn của bạn ) bằng cách sử dụng thẻ nguồn:

<script src="my_data.js"></script>

Nếu bạn mã hóa đầu vào của mình vào Javascript, như trong trường hợp này:

mydata.js :

$xsl_text = "<xsl:stylesheet version="1.0" + ....

(điều này dễ dàng hơn cho json) sau đó bạn có 'dữ liệu' của mình trong biến toàn cầu Javascript để sử dụng theo ý muốn.