跨域请求仅支持 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 无法加载 文件：///C:/xampp/htdocs/webname/resources/templates/signup.php。叉 源请求仅支持 HTTP。

问题是 signup.php 文件托管在我的本地 Web 服务器上，所有网站都在该服务器上运行，因此它不是跨域的。

我该如何解决这个问题？

Answer 1

对于所有 python 用户：

只需转到终端中的目标文件夹。

cd projectFoder

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

python -m http.server 8000

在 :: 端口 8000 (http://[::]:8000/) 上提供 HTTP ...

转到您的链接：http://0.0.0.0:8000/

享受:)

Answer 2

您也可以使用 php 解释器在没有 python 的情况下启动服务器。

例如：

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

如果您想要替代 npm，这可能会很有用，因为 php 实用程序预装在某些操作系统（包括 Mac）上。

Answer 3

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确实提供了恢复页面 选项虽然如此，如果您打开页面，只需点击恢复，它就会起作用）。

Answer 4

我在尝试加载使用 JSON 数据填充页面的简单 HTML 文件时遇到了同样的错误，因此我使用了 node.js 和 express 来解决问题。如果没有安装node，需要先install node。

1. 安装 express npm install express

2. 在项目的根文件夹中创建一个 server.js 文件，在我的例子中是我想要服务器的文件上方的一个文件夹

3. 在 server.js 文件中添加如下内容，并在 express gihub 网站上阅读：

   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. 保存 server.js 后，您可以使用以下命令运行服务器：

node server.js

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

Answer 5

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

npm install -g http-server

将目录更改为您要从中提供文件的目录：

$ cd ~/projects/angular/current_project 

运行服务器：

$ http-server 

这将产生消息正在启动 http-server, serving on:

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

这允许您在浏览器中使用 url，例如

http://your_ip:8080/index.html

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

Answer 7

如果您正在处理一个小型前端项目并想在本地测试它，您通常会通过在网络浏览器中指向本地目录来打开它，例如输入 file:///home/erick/ URL 栏中的 mysuperproject/index.html。但是，如果您的站点正在尝试加载资源，即使它们位于您的本地目录中，您也可能会看到如下警告：

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

Chrome 和其他现代浏览器已经对跨域请求实施了安全限制，这意味着你不能通过 file:/// 加载任何东西，你需要始终使用 http:// 协议，即使是在本地 -due 同源政策。就这么简单，您需要安装一个网络服务器来在那里运行您的项目。

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

不过，对于懒惰的人来说，有一个更简单、更轻量级的解决方案。你可以使用 Python 的 SimpleHTTPServer。它已经与 python 捆绑在一起，所以你根本不需要安装或配置任何东西！

例如 cd 到你的项目目录

1 cd /home/erick/mysuperproject 然后简单地使用

1 python -m SimpleHTTPServer 就是这样，您将在终端中看到此消息

1 在 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

Answer 8

我很幸运可以通过以下开关启动 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

到“目标”路径的末尾

Answer 9

您需要实际运行一个网络服务器，然后向该服务器上的 URI 发出 get 请求，而不是向文件发出 get 请求；例如换行：

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

阅读类似：

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

初始请求页面也需要通过 http 进行。