跨域请求仅支持HTTP，但它不是跨域的。

Question

我使用这段代码进行 AJAX 请求：

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

但是从 Google Chrome 的 JavaScript 控制台中，我一直收到此错误：

XMLHttpRequest 无法加载 file:///C:/xampp/htdocs/webname/resources/templates/signup.php。跨域请求仅支持 HTTP。

问题在于 signup.php 文件托管在我的本地 Web 服务器上，这就是整个网站的运行位置，因此不涉及跨域。

我该如何解决这个问题？

- siannone

---

你尝试过使用HTTP URL而不是本地路径吗？ - Edward Thomson

我建议使用完整的URL。 - Dominic Green

@EdwardThomson，它起作用了！但现在我必须在我的服务器配置中设置allow_url_include = On。 - siannone

可能是重复的问题：在加载本地文件时出现“仅支持HTTP的跨域请求”错误。原文链接。 - user719662

Answer 1

我有一个运行Chrome的幸运选项：

--allow-file-access-from-files

在 os x 上尝试（如果您复制粘贴，请重新输入破折号）：

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

在其他*nix系统上运行（未经测试）

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

或在Windows上编辑Chrome快捷方式的属性，并添加开关，例如：

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

到“目标”路径的结尾

- prauchfuss

---

原则上在 Google Chrome 中可以工作（至少在 v24 版本中），但请注意，在 OS X 上必须按以下方式调用它：open -a 'Google Chrome' --args —allow-file-access-from-files。还要注意：如果您指定了基于 file:// 的 URL（而不是文件系统路径），请确保使用 file://localhost/... 而不是 file:///...。 - mklement0

上次我在Windows中尝试这样做，上面的方法没有奏效。最终我不得不使用以下开关从DOS提示符启动Chrome...虽然不完美但可行。 - prauchfuss

在Linux上运行得非常好。 - user1205577

在 OS X Yosemite 10.10.2 和 Chrome 版本41.0.2272.89 (64-bit) 上运行良好。 - The Dude

在Windows中，您可以使用“start chrome --allow-file-access-from-files”命令。对我来说，在执行该命令之前需要关闭所有Chrome实例。 - lumapu

它像魔法一样运行得很好，但在Windows上，快捷方式的地址格式保持为"C:\Program Files\Google\Chrome\Application\chrome.exe" /allow-file-access-from-files。 - Rafael Lima

Answer 2

如果您正在开发一个小型前端项目并希望在本地进行测试，通常需要通过在浏览器中指向本地目录来打开它，例如在URL栏中输入file:///home/erick/mysuperproject/index.html。但是，如果您的站点正在尝试加载资源，即使它们放在本地目录中，您也可能会看到类似于以下的警告消息：

XMLHttpRequest无法加载file:///home/erick/mysuperproject/mylibrary.js。跨域请求仅受支持HTTP。

Chrome和其他现代浏览器已实施了跨源请求的安全限制，这意味着您无法通过file:///加载任何内容，您需要始终使用http://协议，即使是在本地-由于Same Origin原则。简单来说，您需要挂载Web服务器才能在其中运行您的项目。

这不是世界末日，有许多解决方案，包括老式的Apache（如果您运行多个其他项目，则使用VirtualHosts），node.js与express，Ruby服务器等，或者只需修改浏览器设置。

不过，对于懒惰的人来说，还有一种更简单和轻量级的解决方案。您可以使用Python的SimpleHTTPServer。它已经与python捆绑在一起，因此您不需要安装或配置任何内容！

所以，cd到您的项目目录中，例如

cd /home/erick/mysuperproject

然后简单地使用 python -m SimpleHTTPServer 就这样，您将在终端中看到此消息

正在0.0.0.0端口8000上提供HTTP…

现在，您可以返回浏览器并访问http://0.0.0.0:8000以服务于所有目录文件。您可以配置端口和其他内容，请查看文档。但是当我匆忙测试新库或研究新想法时，这个简单的技巧对我很有用。

编辑：

在Python 3+中，SimpleHTTPServer已被http.server替代。因此，在Python 3.3中，例如，以下命令是等效的：

python -m http.server 8000

- Pramod Alagambhat

---

懒人解决方案很棒。非常简单明了，你不需要做任何其他的事情。 - Nico

在Node.js中也存在相应的功能：simple-http-server。 - StackHola

在Windows 8.1上，您仍然需要安装Python，对吗？ - J86

我在Windows上使用Xampp，它很简单，但我建议使用Node，另外不要忘记在Skype上解除端口80的阻止，以允许服务器运行。 - Timo Huovinen

Answer 3

你需要运行一个Web服务器，并对该服务器上的URI进行获取请求，而不是对文件进行获取请求；例如，更改以下行：

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

读取像这样的内容:

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

而且初始请求页面也需要使用http进行。

- Anya Shenanigans

---

$.get实际上是在Web浏览器的JavaScript上下文中发出的，因此该文件需要具有URL引用 - 在php中编写的代码仍然可以引用本地文件而不会出现问题。 - Anya Shenanigans

另外，还有一种Python解决方案：(1) 打开命令行并导航到文件夹， (2) 输入python -m SimpleHTTPServer 8888，然后 (3) 在浏览器中访问http://localhost:8888/。 - geotheory

+1 这对解决我的问题非常有帮助。非常感谢 :) - Praveen

这是一些专注的反馈 :) 但这只是网页设计的基本第一步。 - geotheory

Python 3用户请注意：使用python -m http.server 8888命令。 - Jelle Fresen

Answer 4

当我尝试加载使用JSON数据填充页面的简单HTML文件时，出现了相同的错误，因此我使用了node.js和express来解决问题。如果您还没有安装node，请先 安装node。

1. 安装express：npm install express

2. 在项目的根目录中创建一个server.js文件，在我的情况下，是在要提供的文件的上一级文件夹中

3. 在server.js文件中添加如下内容，并在express GitHub网站上阅读相关信息：

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');

保存 server.js 文件后，您可以使用以下命令运行服务器:

node server.js

5. 转到 http://localhost:8000/FILENAME，您应该会看到您尝试加载的 HTML 文件。

- thehme

Answer 5

如果您已经安装了nodejs，可以使用命令行下载并安装服务器：

npm install -g http-server

切换到您想要提供文件的目录：

$ cd ~/projects/angular/current_project 

运行服务器：

$ http-server 

这段代码将会产生以下信息：启动http-server，服务地址为：

可用于： http://your_ip:8080 和 http://127.0.0.1:8080

这样你就可以在浏览器中使用如下的url：

http://your_ip:8080/index.html

- Rahul Reddy

Answer 6

最好的方式是这样的。确保两个文件都在服务器上。调用html页面时，使用网址：http:://localhost/myhtmlfile.html，而不是C::///users/myhtmlfile.html。同样确保传递给json的url是以下所示的网址：

$(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

Answer 7

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. 将chromeLocation路径更改为您自己的路径。

2. 将上述内容保存为.bat文件。

3. 将您的文件拖放到您创建的批处理文件上。（Chrome提供了恢复页面选项，如果您有打开的页面，请点击恢复即可正常工作）。

- Yogesh Jog

Answer 8

你也可以使用PHP解释器启动服务器而无需使用Python。

E.g:

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

如果您想要一种替代npm的选择，那么这将非常有用，因为php实用程序预装在某些操作系统（包括Mac）上。

- Pranav Kasetti

Answer 9

针对所有Python用户：

只需在终端中转到您的目标文件夹即可。

cd projectFoder

然后启动HTTP服务器 对于Python3+：

python -m http.server 8000

在端口8000上提供HTTP服务（http://[::]:8000/）...

前往您的链接：http://0.0.0.0:8000/

享受吧 :)

- Shiwanshu Kumar