Yêu cầu nguồn gốc của Cross Cross chỉ được hỗ trợ cho HTTP. lỗi khi tải tập tin cục bộ

Tôi đang cố tải mô hình 3D vào Three.js JSONLoadervà mô hình 3D đó nằm trong cùng thư mục với toàn bộ trang web.

Tôi đang gặp "Cross origin requests are only supported for HTTP."lỗi, nhưng tôi không biết nguyên nhân gây ra cũng như cách khắc phục.

Quả cầu pha lê của tôi nói rằng bạn đang tải mô hình bằng cách sử dụng file://hoặc C:/, đúng với thông báo lỗi vì chúng không phải làhttp://

Vì vậy, bạn có thể cài đặt máy chủ web trong PC cục bộ hoặc tải lên mô hình ở nơi khác và sử dụng jsonpvà thay đổi url thànhhttp://example.com/path/to/model

Nguồn gốc được định nghĩa trong RFC-6454 là

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

Vì vậy, mặc dù tệp của bạn có nguồn gốc từ cùng một máy chủ ( localhost), nhưng miễn là lược đồ khác nhau ( http/ file), chúng được coi là nguồn gốc khác nhau.

Nói rõ hơn - Có, lỗi là bạn không thể trỏ trình duyệt của mình trực tiếp vào file://some/path/some.html

Dưới đây là một số tùy chọn để nhanh chóng quay vòng một máy chủ web cục bộ để cho phép trình duyệt của bạn hiển thị các tệp cục bộ

Con trăn 2

Nếu bạn đã cài đặt Python ...

1. Thay đổi thư mục vào thư mục some.htmltồn tại tệp hoặc tệp của bạn bằng lệnhcd /path/to/your/folder

2. Khởi động máy chủ web Python bằng lệnh python -m SimpleHTTPServer

Điều này sẽ bắt đầu một máy chủ web để lưu trữ toàn bộ danh sách thư mục của bạn tại http://localhost:8000

3. Bạn có thể sử dụng một cổng tùy chỉnh python -m SimpleHTTPServer 9000cung cấp cho bạn liên kết:http://localhost:9000

Cách tiếp cận này được tích hợp trong mọi cài đặt Python.

Con trăn 3

Thực hiện các bước tương tự, nhưng sử dụng lệnh sau thay thế python3 -m http.server

Node.js

Ngoài ra, nếu bạn yêu cầu thiết lập nhanh nhạy hơn và đã sử dụng nodejs ...

1. Cài đặt http-serverbằng cách gõnpm install -g http-server

2. Thay đổi vào thư mục làm việc của bạn, nơi some.htmlcuộc sống của bạn

3. Bắt đầu máy chủ http của bạn bằng cách phát hành http-server -c-1

Điều này tạo ra một httpd Node.js phục vụ các tệp trong thư mục của bạn dưới dạng các tệp tĩnh có thể truy cập từ http://localhost:8080

Hồng ngọc

Nếu ngôn ngữ ưa thích của bạn là Ruby ... thì các vị thần Ruby cũng nói rằng nó cũng hoạt động:

ruby -run -e httpd . -p 8080

PHP

Tất nhiên PHP cũng có giải pháp của nó.

php -S localhost:8000

Trong Chrome, bạn có thể sử dụng cờ này:

--allow-file-access-from-files

Đọc thêm tại đây.

Ran vào ngày hôm nay.

Tôi đã viết một số mã trông như thế này:

app.controller('ctrlr', function($scope, $http){
    $http.get('localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

... nhưng nó sẽ trông như thế này:

app.controller('ctrlr', function($scope, $http){
    $http.get('http://localhost:3000').success(function(data) {
        $scope.stuff = data;
    });
});

Sự khác biệt duy nhất là sự thiếu http://trong đoạn mã thứ hai.

Chỉ muốn đưa nó ra khỏi đó trong trường hợp có những người khác có vấn đề tương tự.

Chỉ cần thay đổi url để http://localhostthay vì localhost. Nếu bạn mở tệp html từ cục bộ, bạn nên tạo một máy chủ cục bộ để phục vụ tệp html đó, cách đơn giản nhất là sử dụng Web Server for Chrome. Điều đó sẽ khắc phục vấn đề.

Trong một ứng dụng Android - ví dụ, để cho phép hoạt Javascript để có quyền truy cập vào tài sản qua file:///android_asset/- sử dụng setAllowFileAccessFromFileURLs(true)trên WebSettingsmà bạn nhận được từ gọi getSettings()trên WebView.

Sử dụng http://hoặc https://để tạo url

lỗi :localhost:8080

giải pháp :http://localhost:8080

Cách nhanh nhất đối với tôi là: đối với người dùng windows chạy tệp của bạn trên vấn đề Firefox đã được giải quyết hoặc nếu bạn muốn sử dụng chrome cách dễ nhất đối với tôi là cài đặt Python 3 thì từ lệnh nhắc lệnh chạy, python -m http.server sau đó truy cập http: // localhost: 8000 / sau đó điều hướng đến các tập tin của bạn

python -m http.server

Tôi sẽ liệt kê 3 cách tiếp cận khác nhau để giải quyết vấn đề này:

1. Sử dụng npmgói rất nhẹ : Cài đặt máy chủ trực tiếp bằng cách sử dụng npm install -g live-server. Sau đó, vào thư mục đó mở terminal và gõ live-servervà nhấn enter, trang sẽ được phục vụ tại localhost:8080. THƯỞNG: Nó cũng hỗ trợ tải lại nóng theo mặc định.
2. Sử dụng ứng dụng Google Chrome nhẹ do Google phát triển : Sau đó, cài đặt ứng dụng, chuyển đến tab ứng dụng trong Chrome và mở ứng dụng. Trong ứng dụng trỏ nó vào thư mục bên phải. Trang của bạn sẽ được phục vụ!
3. Sửa đổi phím tắt Chrome trong cửa sổ : Tạo lối tắt của trình duyệt Chrome. Nhấp chuột phải vào biểu tượng và mở thuộc tính. Trong tài sản, chỉnh sửa targetđể "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"và tiết kiệm. Sau đó, sử dụng Chrome mở trang bằng cách sử dụng ctrl+o. LƯU Ý: KHÔNG sử dụng phím tắt này để duyệt thông thường.

Đối với những người dùng Windows không có Python hoặc Node.js, vẫn có một giải pháp nhẹ: Mongoose .

Tất cả những gì bạn làm là kéo tệp thực thi đến bất kỳ nơi nào gốc của máy chủ và chạy nó. Một biểu tượng sẽ xuất hiện trên thanh tác vụ và nó sẽ điều hướng đến máy chủ trong trình duyệt mặc định.

Ngoài ra, Z-WAMP là một WAMP di động 100% chạy trong một thư mục duy nhất, thật tuyệt vời. Đó là một tùy chọn nếu bạn cần một máy chủ PHP và MySQL nhanh.

Nếu bạn sử dụng Mozilla Firefox, Nó sẽ hoạt động như mong đợi mà không gặp vấn đề gì;

Thật ngạc nhiên, IntenetExplorer_Edge hoạt động hoàn toàn tốt !!!

Giải pháp dễ dàng cho ai sử dụng Mã VS

Tôi đã nhận được lỗi này trong một thời gian. Hầu hết các câu trả lời hoạt động. Nhưng tôi đã tìm thấy một giải pháp khác. Nếu bạn không muốn giải quyết node.jshoặc bất kỳ giải pháp nào khác ở đây và bạn đang làm việc với một tệp HTML (gọi các chức năng từ một tệp js khác hoặc tìm nạp json api's) hãy thử sử dụng tiện ích mở rộng Live Server .

Nó cho phép bạn mở một máy chủ trực tiếp một cách dễ dàng. Và vì nó tạo ra localhostmáy chủ, vấn đề đang được giải quyết. Bạn có thể chỉ cần bắt đầu localhostbằng cách mở tệp HTML và nhấp chuột phải vào trình chỉnh sửa và nhấp vào Open with Live Server.

Về cơ bản, nó tải các tập tin bằng cách sử dụng http://localhost/index.htmlthay vì sử dụng file://....

BIÊN TẬP

Không cần thiết phải có một .htmltập tin. Bạn có thể khởi động Live Server bằng các phím tắt.

Nhấn (alt+L, alt+O)để mở máy chủ và (alt+L, alt+C)dừng máy chủ. [Trên MAC cmd+L, cmd+Ovà cmd+L, cmd+C]

Hy vọng nó sẽ giúp được ai đó :)

Tôi đã gặp lỗi chính xác này khi tải tệp HTML trên trình duyệt đang sử dụng tệp json từ thư mục cục bộ. Trong trường hợp của tôi, tôi đã có thể giải quyết điều này bằng cách tạo một máy chủ nút đơn giản cho phép lưu trữ nội dung tĩnh. Tôi để lại mã cho câu trả lời này .

Tôi khuyên bạn nên sử dụng một máy chủ mini để chạy các loại ứng dụng này trên localhost (nếu bạn không sử dụng một số máy chủ sẵn có).

Đây là một thứ rất đơn giản để thiết lập và chạy:

https://www.npmjs.com/package/tiny-server

Tôi nghi ngờ nó đã được đề cập trong một số câu trả lời, nhưng tôi sẽ sửa đổi một chút để có câu trả lời hoàn chỉnh (dễ tìm và sử dụng hơn).

1. Truy cập: https://nodejs.org/en/doad/ . Cài đặt nodejs.

2. Cài đặt máy chủ http bằng cách chạy lệnh từ dấu nhắc lệnh npm install -g http-server.

3. Thay đổi vào thư mục làm việc của bạn, nơi index.html/ yoursome.htmlcư trú.

4. Bắt đầu máy chủ http của bạn bằng cách chạy lệnh http-server -c-1

Mở trình duyệt web đến http://localhost:8080 hoặc http://localhost:8080/yoursome.html - tùy thuộc vào tên tệp html của bạn.

Nó chỉ đơn giản nói rằng ứng dụng nên được chạy trên máy chủ web. Tôi gặp vấn đề tương tự với chrome, tôi bắt đầu tomcat và chuyển ứng dụng của mình đến đó, và nó đã hoạt động.

er. Tôi chỉ tìm thấy một số từ chính thức "Cố gắng tải các mô-đun AMD từ xa, sử dụng plugin dojo / văn bản sẽ không thành công do các hạn chế bảo mật nguồn gốc chéo (Các phiên bản được xây dựng của các mô-đun AMD không bị ảnh hưởng vì các lệnh gọi dojo / văn bản bị loại bỏ bởi hệ thống xây dựng.) " https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Một cách nó hoạt động tải các tệp cục bộ là sử dụng chúng trong thư mục dự án thay vì bên ngoài thư mục dự án của bạn. Tạo một thư mục trong các tệp ví dụ dự án của bạn tương tự như cách chúng tôi tạo cho hình ảnh và thay thế phần sử dụng đường dẫn cục bộ hoàn toàn khác với đường dẫn dự án và sử dụng url tương đối của tệp trong thư mục dự án. Nó làm việc cho tôi

Đối với tất cả mọi người trên MacOS... hãy thiết lập một LaunchAgent đơn giản để kích hoạt các khả năng tuyệt vời này trong bản sao Chrome của riêng bạn ...

Lưu a plist, đặt tên bất cứ thứ gì ( launch.chrome.dev.mode.pliství dụ) vào ~/Library/LaunchAgentsvới nội dung tương tự ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>launch.chrome.dev.mode</string>
    <key>ProgramArguments</key>
    <array>
        <string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
        <string>-allow-file-access-from-files</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

Nó sẽ khởi chạy khi khởi động .. nhưng bạn có thể buộc nó làm như vậy bất cứ lúc nào với lệnh terminal

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

TADA! 💁🏻 🙊

• Cài đặt máy chủ web cục bộ cho java, ví dụ Tomcat, đối với php, bạn có thể sử dụng đèn vv
• Thả tệp json vào thư mục máy chủ ứng dụng có thể truy cập công khai

• 

• Khởi động máy chủ ứng dụng và bạn sẽ có thể truy cập tệp từ localhost

Không thể tải các tệp cục bộ tĩnh (ví dụ: svg) mà không có máy chủ. Nếu bạn đã cài đặt NPM / YARN trong máy của mình, bạn có thể thiết lập máy chủ http đơn giản bằng cách sử dụng " http-server "

npm install http-server -g
http-server [path] [options]

Hoặc mở terminal trong thư mục dự án đó và gõ "hs". Nó sẽ tự động khởi động máy chủ HTTP trực tiếp.

Nhiều vấn đề cho vấn đề này, với vấn đề của tôi bị thiếu '/' ví dụ: jquery-1.10.2.js: 8720 XMLHttpRequest không thể tải http: // localhost: xxxSản phẩm / getList_tagLabels / Phải là: http: // localhost: xxx / Sản phẩm / getList_tagLabels /

Tôi hy vọng sự giúp đỡ này cho những người gặp vấn đề này.

Tôi cũng đã có thể tạo lại thông báo lỗi này khi sử dụng thẻ neo với sau href:

<a href="javascript:">Example a tag</a>

Trong trường hợp của tôi, một thẻ đã được sử dụng để lấy 'Con trỏ con trỏ' và sự kiện này thực sự được điều khiển bởi một số jQuery khi sự kiện nhấp chuột. Tôi đã xóa href và thêm một lớp áp dụng:

cursor:pointer;

Đối với người dùng Linux Python:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

Nếu bạn khăng khăng chạy .html tệp cục bộ và không phục vụ nó với máy chủ web, bạn có thể ngăn những yêu cầu nguồn gốc chéo đó xảy ra ngay từ đầu bằng cách cung cấp tài nguyên có vấn đề.

Tôi gặp vấn đề này khi cố gắng phục vụ .jscác tập tin thông qua file://. Giải pháp của tôi là cập nhật tập lệnh xây dựng để thay thế <script src="...">thẻ <script>...</script>. Đây là mộtgulp cách tiếp cận để làm điều đó:

1. chạy npm install --save-devđến các gói gulp, gulp-inlinevà del.

2. Sau khi tạo gulpfile.jsthư mục gốc, hãy thêm đoạn mã sau (chỉ cần thay đổi đường dẫn tệp cho bất kỳ thứ gì phù hợp với bạn):

let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');

gulp.task('inline', function (done) {
    gulp.src('dist/index.html')
    .pipe(inline({
        base: 'dist/',
        disabledTypes: 'css, svg, img'
    }))
    .pipe(gulp.dest('dist/').on('finish', function(){
        done()
    }));
});

gulp.task('clean', function (done) {
    del(['dist/*.js'])
    done()
});

gulp.task('bundle-for-local', gulp.series('inline', 'clean'))

3. Chạy gulp bundle-for-localhoặc cập nhật tập lệnh xây dựng của bạn để chạy nó tự động.

Bạn có thể xem vấn đề chi tiết và giải pháp cho trường hợp của tôi ở đây .

cordova đạt được điều này. Tôi vẫn không thể hiểu làm thế nào cordova đã làm. Nó thậm chí không đi qua nênInterceptRequest.

Sau đó tôi phát hiện ra rằng khóa để tải bất kỳ tệp nào từ cục bộ là: myWebView.getSinstall (). SetAllowUniversalAccessFromFileURLs (true);

Và khi bạn muốn truy cập bất kỳ tài nguyên http nào, webview sẽ kiểm tra bằng phương thức OPTION, bạn có thể cấp quyền truy cập thông qua WebViewClient.shouldInterceptRequest bằng cách trả về phản hồi và đối với phương thức GET / POST sau, bạn có thể trả về null.

đầu tiên đóng tất cả các trường hợp của chrome.

sau đó làm theo điều này

Tôi đã sử dụng lệnh này trên mac.

"/ Ứng dụng / Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-files

Cho cửa sổ:

Làm cách nào để khởi chạy html bằng Chrome ở chế độ "--allow-file-access-from-files"?

Trải nghiệm điều này khi tôi tải xuống một trang để xem ngoại tuyến.

Tôi chỉ phải xóa integrity="*****"và crossorigin="anonymous"các thuộc tính khỏi tất cả <link>và <script>các thẻ