XMLHttpRequest không thể tải tệp. Yêu cầu gốc chéo chỉ được hỗ trợ cho HTTP

Tôi nhận được lỗi sau:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

Tôi nhận ra rằng câu hỏi này đã được trả lời trước đó, nhưng tôi vẫn chưa tìm ra giải pháp cho vấn đề của mình. Tôi đã thử chạy chrome.exe --allow-file-access-from-filestừ dấu nhắc lệnh và di chuyển tệp sang hệ thống tệp cục bộ, nhưng tôi vẫn gặp lỗi tương tự.

Tôi đánh giá cao bất kỳ đề xuất nào!

Nếu bạn đang làm điều gì đó như viết HTML và Javascript trong trình chỉnh sửa mã trên máy tính cá nhân của mình và kiểm tra kết quả đầu ra trong trình duyệt, bạn có thể sẽ nhận được thông báo lỗi về Cross Origin Requests. Trình duyệt của bạn sẽ hiển thị HTML và chạy Javascript, jQuery, angleJs trong trình duyệt của bạn mà không cần thiết lập máy chủ. Nhưng nhiều trình duyệt web được lập trình để theo dõi các cuộc tấn công trên nhiều trang web và sẽ chặn các yêu cầu. Bạn không muốn bất cứ ai có thể đọc ổ cứng của bạn từ trình duyệt web của bạn. Bạn có thể tạo một trang web hoạt động đầy đủ bằng Notepad ++ sẽ chạy Javascript và các khung công tác như jQuery và angleJs; và kiểm tra mọi thứ chỉ bằng cách sử dụng mục menu Notepad ++,RUN, LAUNCH IN FIREFOX. Đó là một cách hay và dễ dàng để bắt đầu tạo một trang web, nhưng khi bạn bắt đầu tạo bất kỳ thứ gì khác ngoài bố cục, css và điều hướng trang đơn giản, bạn cần một máy chủ cục bộ được thiết lập trên máy của mình.

Đây là một số tùy chọn mà tôi sử dụng.

1. Kiểm tra cục bộ trang web của bạn trên Firefox, sau đó triển khai tới máy chủ của bạn.
2. hoặc: Chạy một máy chủ cục bộ

Thử nghiệm trên Firefox, Triển khai tới Máy chủ

1. Firefox hiện cho phép Yêu cầu nguồn gốc chéo từ các tệp được phân phát từ ổ cứng của bạn
2. Trang web lưu trữ web của bạn sẽ cho phép yêu cầu tệp trong thư mục như được định cấu hình bởi tệp kê khai

Chạy máy chủ cục bộ

• Chạy một máy chủ trên máy tính của bạn, như Apache hoặc Python
• Python không phải là một máy chủ, nhưng nó sẽ chạy một máy chủ đơn giản

Chạy máy chủ cục bộ bằng Python

Nhận địa chỉ IP của bạn:

• Trên Windows: Mở 'Command Prompt'. Tất cả chương trình, phụ kiện, Command Prompt
• Tôi luôn luôn chạy Command Promptnhư Administrator. Nhấp chuột phải vào Command Promptmục menu và tìm kiếmRun As Administrator
• ipconfigNhập lệnh: và nhấn Enter.
• Tìm kiếm: Địa chỉ IPv4. . . . . . . . 12.123.123,00
• Có những trang web cũng sẽ hiển thị địa chỉ IP của bạn

Nếu bạn không có Python, hãy tải xuống và cài đặt nó.

Sử dụng 'Command Prompt', bạn phải chuyển đến thư mục chứa các tệp mà bạn muốn phân phát như một trang web.

• Nếu bạn cần quay lại thư mục C: \ Root - hãy nhập cd /
• gõ cd Drive: \ Folder \ Folder \ etc để đến thư mục chứa tệp .Html của bạn (hoặc php, v.v.)
• Kiểm tra đường dẫn. gõ: đường dẫn tại dấu nhắc lệnh. Bạn phải xem đường dẫn đến thư mục chứa python. Ví dụ: nếu python ở trong C: \ Python27, thì bạn phải thấy địa chỉ đó trong các đường dẫn được liệt kê.
• Nếu đường dẫn đến thư mục Python không có trong đường dẫn, bạn phải đặt đường dẫn. gõ: đường dẫn trợ giúp và nhấn Enter. Bạn sẽ thấy trợ giúp cho đường dẫn.
• Nhập một cái gì đó như: path c: \ python27% path%
• % path% giữ tất cả các đường dẫn hiện tại của bạn. Bạn không muốn xóa tất cả các đường dẫn hiện tại của mình, chỉ cần thêm một đường dẫn mới.
• Tạo đường dẫn mới TỪ thư mục mà bạn muốn phân phát tệp.
• Khởi động máy chủ Python: Nhập: python -m SimpleHTTPServer portVí dụ : trong đó 'cổng' là số cổng bạn muốnpython -m SimpleHTTPServer 1337
• Nếu bạn để trống cổng, nó sẽ mặc định là cổng 8000
• Nếu máy chủ Python khởi động thành công, bạn sẽ thấy một tin nhắn.

Chạy ứng dụng web của bạn cục bộ

• Mở trình duyệt
• Trong loại dòng địa chỉ: http://your IP address:port
• http://xxx.xxx.x.x:1337 hoặc http://xx.xxx.xxx.xx:8000cho mặc định
• Nếu máy chủ đang hoạt động, bạn sẽ thấy danh sách các tệp của mình trong trình duyệt
• Bấm vào tệp bạn muốn phân phát và nó sẽ hiển thị.

Các giải pháp nâng cao hơn

• Cài đặt trình soạn thảo mã, máy chủ web và các dịch vụ khác được tích hợp.

Bạn có thể cài đặt riêng Apache, PHP, Python, SQL, Debugger, v.v. trên máy của mình, sau đó dành nhiều thời gian để tìm cách làm cho chúng hoạt động cùng nhau hoặc tìm kiếm giải pháp kết hợp tất cả những thứ đó.

Tôi thích sử dụng XAMPP với NetBeans IDE. Bạn cũng có thể cài đặt WAMP User Interfaceđể quản lý và tích hợp Apache và các dịch vụ khác.

Giải pháp đơn giản

Nếu bạn đang làm việc với các tệp html / js / css thuần túy.

Cài đặt ứng dụng ( liên kết ) máy chủ nhỏ này trong chrome. Mở ứng dụng và trỏ vị trí tệp vào thư mục dự án của bạn.

Di chuyển url được hiển thị trong ứng dụng.

Chỉnh sửa: Giải pháp thông minh hơn bằng cách sử dụng Gulp

Bước 1: Để cài đặt Gulp. Chạy lệnh sau trong thiết bị đầu cuối của bạn.

npm install gulp-cli -g
npm install gulp -D

Bước 2: Bên trong thư mục dự án của bạn, tạo một tệp có tên gulpfile.js. Sao chép nội dung sau vào bên trong nó.

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

Bước 3: Cài đặt plugin gulp đồng bộ trình duyệt. Bên trong cùng một thư mục có gulpfile.js, hãy chạy lệnh sau

npm install browser-sync gulp --save-dev

Bước 4: Khởi động máy chủ. Bên trong cùng một thư mục có gulpfile.js, hãy chạy lệnh sau

gulp serve

Lỗi này xảy ra vì bạn chỉ đang mở tài liệu html trực tiếp từ trình duyệt. Để khắc phục điều này, bạn sẽ cần cung cấp mã của mình từ máy chủ web và truy cập nó trên máy chủ cục bộ. Nếu bạn đã thiết lập Apache, hãy sử dụng nó để phục vụ các tệp của bạn. Một số IDE đã tích hợp sẵn các máy chủ web, như JetBrains IDE, Eclipse ...

Nếu bạn đã thiết lập Node.Js thì bạn có thể sử dụng máy chủ http . Chỉ cần chạy npm install http-server -gvà bạn sẽ có thể sử dụng nó trong thiết bị đầu cuối như http-server C:\location\to\app. Kirill Fuchs

Để thêm vào câu trả lời phức tạp của Alan Wells , đây là một bản sửa lỗi nhanh

Chạy máy chủ cục bộ

bạn có thể phục vụ bất kỳ thư mục nào trong máy tính của mình với Phục vụ

Trước tiên, điều hướng bằng cách sử dụng dòng lệnh vào thư mục bạn muốn cung cấp.

Sau đó

npx i -g serve
serve

hoặc nếu bạn muốn kiểm tra Phân phối bằng cách tải xuống

npx serve

và đó là nó! Bạn có thể xem các tệp của mình tại http: // localhost: 5000

Tôi đã gặp phải lỗi này khi triển khai cục bộ dự án API Web của mình và tôi chỉ gọi dự án API bằng URL này được cung cấp bên dưới:

localhost // myAPIProject

Vì thông báo lỗi cho biết đó không phải là http: // nên tôi đã thay đổi URL và đặt tiền tố http như được đưa ra bên dưới và lỗi đã biến mất.

http: // localhost // myAPIProject

Nếu bạn sử dụng WebStorm Javascript IDE , bạn chỉ có thể mở dự án của mình từ WebStorm trong trình duyệt của mình. WebStorm sẽ tự động khởi động một máy chủ và bạn sẽ không gặp phải bất kỳ lỗi nào trong số này nữa, bởi vì bạn hiện đang truy cập các tệp bằng các giao thức được phép / hỗ trợ (HTTP).

Tùy thuộc vào nhu cầu của bạn, nhưng cũng có một cách nhanh chóng để tạm thời kiểm tra JSON (giả) của bạn bằng cách lưu JSON của bạn trên http://myjson.com . Sao chép liên kết api và dán vào mã javascript của bạn. Viola! Khi bạn muốn triển khai mã, bạn không được quên thay đổi url đó trong mã của mình!

Đặt thư mục dự án của bạn vào thư mục htdocs của thư mục Xampp Khởi động máy chủ Apache của bạn bằng cách sử dụng bảng điều khiển xampp sau đó mở goto localhost / projectfolder của trình duyệt sau đó nó bắt đầu hoạt động