Yêu cầu gốc chéo chỉ được hỗ trợ cho HTTP nhưng không hỗ trợ tên miền chéo

88

Tôi đang sử dụng mã này để thực hiện yêu cầu AJAX:

$("#userBarSignup").click(function(){
    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",
        {/*params*/},
        function(response){
            $("#signup").html("TEST");
            $("#signup").html(response);
        },
        "html");

Nhưng từ bảng điều khiển JavaScript của Google Chrome, tôi tiếp tục nhận được lỗi này:

XMLHttpRequest không thể tải tệp: /// C: /xampp/htdocs/webname/resources/templates/signup.php. Yêu cầu gốc chéo chỉ được hỗ trợ cho HTTP.

Vấn đề là tệp signup.php được lưu trữ trên máy chủ web cục bộ của tôi, đó là nơi chạy tất cả các trang web nên nó không phải là miền chéo.

Làm thế nào tôi có thể giải quyết vấn đề này?

javascript 
— siannone
nguồn
5
Bạn đã thử sử dụng URL HTTP thay vì đường dẫn cục bộ chưa?
— Edward Thomson
1
Tôi sẽ đề xuất sử dụng một url đầy đủ
— Dominic Green
2
@EdwardThomson Nó đã hoạt động! Nhưng bây giờ tôi phải thiết lập allow_url_include = Oncấu hình máy chủ của mình.
— siannone

Câu trả lời:

76

Bạn cần thực sự chạy một máy chủ web và thực hiện yêu cầu nhận đến một URI trên máy chủ đó, thay vì thực hiện yêu cầu nhận đối với một tệp; ví dụ: thay đổi dòng:

    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",

để đọc một cái gì đó như:

    $.get("http://localhost/resources/templates/signup.php",

và trang yêu cầu ban đầu cũng cần được thực hiện qua http.

— Petesh
nguồn
Điều này làm việc như một sự quyến rũ. Bây giờ tôi phải thiết lập allow_url_include = Oncấu hình máy chủ của mình. Tôi có thể kích hoạt nó một cách an toàn hay nó sẽ gây ra một số vấn đề về an toàn?
— siannone
Các hàm $ .get được thực tế phát hành trong bối cảnh javascript của trình duyệt web, do đó nhu cầu tập tin để có tài liệu tham khảo URL - mã được viết bằng php vẫn có thể tham khảo file địa phương mà không vấn đề
— Petesh
44
Ngoài ra có các giải pháp Python: (1) điều hướng một giao diện điều khiển đến thư mục, (2) nhập python -m SimpleHTTPServer 8888, sau đó (3) trình duyệt điều hướng đếnhttp://localhost:8888/
— geotheory
+1 điều này đã giúp rất nhiều để giải quyết vấn đề của tôi. Cảm ơn rất nhiều :)
— Praveen
5
Lưu ý cho Python 3 người sử dụng: sử dụngpython -m http.server 8888
— Jelle Fresen
113

Tôi đã gặp may khi bắt đầu chrome bằng công tắc sau:

--allow-file-access-from-files

Trên os x thử (gõ lại dấu gạch ngang nếu bạn sao chép dán):

open -a 'Google Chrome' --args -allow-file-access-from-files

Khi chạy * nix khác (không được thử nghiệm)

 google-chrome  --allow-file-access-from-files

hoặc trên windows chỉnh sửa các thuộc tính của lối tắt chrome và thêm công tắc, ví dụ:

 C:\ ... \Application\chrome.exe --allow-file-access-from-files

đến cuối đường dẫn "đích"

— prauchfuss
nguồn
7
Công trình trong Google Chrome (ít nhất là của v24) về nguyên tắc, nhưng lưu ý rằng trên OS X bạn phải gọi nó như sau: open -a 'Google Chrome' --args —allow-file-access-from-files. Cũng lưu ý: Nếu bạn chỉ định URL dựa trên tệp: // (thay vì đường dẫn hệ thống tệp), hãy đảm bảo sử dụng file://localhost/...thay vì file:///....
— mklement0
6
Lần trước tôi đã cố gắng thực hiện việc này trong windows, phương pháp trên không hoạt động. Tôi đã kết thúc việc khởi chạy chrome từ lời nhắc DOS với công tắc sau ... Không hoàn hảo nhưng khả thi.
— prauchfuss
Hoạt động tốt trên Linux.
— user1205577
Hoạt động tốt trên OS X Yosemite 10.10.2 và Phiên bản Chrome 41.0.2272.89 (64-bit).
— The Dude
86

Nếu bạn đang làm việc trên một dự án giao diện người dùng nhỏ và muốn kiểm tra nó cục bộ, bạn thường mở nó bằng cách trỏ thư mục cục bộ của mình trong trình duyệt web, chẳng hạn như nhập tệp: /// home / erick / mysuperproject / index .html trong thanh URL của bạn. Tuy nhiên, nếu trang web của bạn đang cố gắng tải các tài nguyên, ngay cả khi chúng được đặt trong thư mục cục bộ của bạn, bạn có thể thấy các cảnh báo như sau:

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

Chrome và các trình duyệt hiện đại khác đã triển khai các hạn chế bảo mật cho Yêu cầu nguồn gốc chéo, có nghĩa là bạn không thể tải bất kỳ thứ gì thông qua tệp: ///, bạn cần sử dụng giao thức http: // mọi lúc, ngay cả chính sách cục bộ -due Same Origin. Đơn giản như vậy, bạn cần phải mount một máy chủ web để chạy dự án của mình ở đó.

Đây không phải là ngày tận thế và có rất nhiều giải pháp ngoài kia, bao gồm Apache cũ tốt (với VirtualHosts nếu bạn đang chạy một số dự án khác), node.js với express, máy chủ Ruby, v.v. hoặc đơn giản là sửa đổi cài đặt trình duyệt.

Tuy nhiên, có một giải pháp đơn giản và nhẹ nhàng cho những người lười biếng. Bạn có thể sử dụng SimpleHTTPServer của Python. Nó đã đi kèm với python nên bạn không cần phải cài đặt hoặc cấu hình bất cứ thứ gì!

Ví dụ: cd vào thư mục dự án của bạn

1 cd / home / erick / mysuperproject và sau đó chỉ cần sử dụng

1 python -m SimpleHTTPServer Và thế là xong, bạn sẽ thấy thông báo này trong thiết bị đầu cuối của mình

1 Cung cấp HTTP trên cổng 0.0.0.0 8000 ... Vì vậy, bây giờ bạn có thể quay lại trình duyệt của mình và truy cập http://0.0.0.0:8000với tất cả các tệp thư mục của bạn được phục vụ ở đó. Bạn có thể cấu hình cổng và những thứ khác, chỉ cần xem tài liệu. Nhưng thủ thuật này chỉ đơn giản là phù hợp với tôi khi tôi đang gấp rút thử nghiệm một thư viện mới hoặc tìm ra một ý tưởng mới.

Bạn hiểu rồi, viết mã vui vẻ!

CHỈNH SỬA: Trong Python 3+, SimpleHTTPServer đã được thay thế bằng http.server. Vì vậy, trong Python 3.3, ví dụ, lệnh sau là tương đương:

python -m http.server 8000
— Pramod Alagambhat
nguồn
5
Giải pháp lười biếng là tuyệt vời. Rất đơn giản, bạn không cần phải làm bất cứ điều gì khác.
— Nico
tồn tại tương đương trong Node.js thêm: đơn giản-http-server
— StackHola
Trên Windows 8.1, bạn vẫn phải cài đặt Python không?
— J86
Tôi sử dụng Xampp trên windows, nó đơn giản, tôi khuyên bạn nên sử dụng nút, cũng đừng quên bỏ chặn cổng 80 trên skype để cho phép máy chủ chạy
— Timo Huovinen
10

Tôi đã gặp lỗi tương tự khi cố gắng tải các tệp HTML đơn giản sử dụng dữ liệu JSON để điền trang, vì vậy tôi đã sử dụng node.js đã qua sử dụng và express để giải quyết vấn đề. Nếu bạn chưa cài đặt nút, trước tiên bạn cần cài đặt nút .

  1. Cài đặt nhanh npm install express

  2. Tạo tệp server.js trong thư mục gốc của dự án của bạn, trong trường hợp của tôi là một thư mục phía trên các tệp tôi muốn làm máy chủ

  3. Đặt một cái gì đó như sau vào tệp server.js và đọc về điều này trên trang gihub express :

    var express = require('express');
var app = express();
var path = require('path');

// __dirname will use the current path from where you run this file 
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, '/FOLDERTOHTMLFILESTOSERVER')));

app.listen(8000);
console.log('Listening on port 8000');

  4. Sau khi bạn đã lưu server.js, bạn có thể chạy máy chủ bằng cách sử dụng:

node server.js

  1. Truy cập http://localhost:8000/FILENAMEvà bạn sẽ thấy tệp HTML mà bạn đang cố gắng tải
— thehme
nguồn
4

Nếu bạn đã cài đặt nodejs, bạn có thể tải xuống và cài đặt máy chủ bằng dòng lệnh:

npm install -g http-server

Thay đổi thư mục thành thư mục mà bạn muốn cung cấp tệp từ: 

$ cd ~/projects/angular/current_project

Chạy máy chủ:

$ http-server

sẽ tạo ra thông báo Khởi động máy chủ http, phục vụ trên:

Có trên: http: // your_ip: 8080 và http://127.0.0.1:8080

Điều đó cho phép bạn sử dụng các url trong trình duyệt của mình như

http: // your_ip: 8080 / index.html

— Rahul Reddy
nguồn
1

Nó hoạt động tốt nhất theo cách này. Đảm bảo rằng cả hai tệp đều nằm trên máy chủ. Khi gọi trang html, hãy sử dụng địa chỉ web như:, http:://localhost/myhtmlfile.htmlvà không C::///users/myhtmlfile.html,. Hãy đảm bảo rằng url được chuyển đến json là một địa chỉ web như được biểu thị bên dưới:

$(function(){
                $('#typeahead').typeahead({
                    source: function(query, process){
                        $.ajax({
                            url: 'http://localhost:2222/bootstrap/source.php',
                            type: 'POST',
                            data: 'query=' +query,
                            dataType: 'JSON',
                            async: true,
                            success: function(data){
                                process(data);
                            }
                        });
                    }
                });
            });
— ken4ward
nguồn
0 
REM kill all existing instance of chrome 
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files

  1. thay đổi đường dẫn chromeLocation bằng đường dẫn của bạn.

  2. lưu ở trên dưới dạng tệp .bat.

  3. kéo thả tệp của bạn vào tệp hàng loạt bạn đã tạo. (chrome không cung cấp tùy chọn khôi phục trang, vì vậy nếu bạn có các trang đang mở, chỉ cần nhấn khôi phục và nó sẽ hoạt động).

— YJDev
nguồn
0

Bạn cũng có thể khởi động máy chủ mà không cần python bằng trình thông dịch php.

Ví dụ:

cd /your/path/to/website/root
php -S localhost:8000

Điều này có thể hữu ích nếu bạn muốn một giải pháp thay thế cho npm, vì tiện ích php được cài đặt sẵn trên một số hệ điều hành (bao gồm cả Mac).

— Pranav Kasetti
nguồn
0

Đối với tất cả người dùng python:

Chỉ cần đi đến thư mục đích của bạn trong thiết bị đầu cuối.

cd projectFoder

sau đó khởi động máy chủ HTTP Đối với Python3 +:

python -m http.server 8000

Đang cung cấp HTTP trên :: cổng 8000 (http: // [::]: 8000 /) ...

truy cập liên kết của bạn: http://0.0.0.0:8000/

Thưởng thức :)

— Shiwanshu Kumar
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.