跨域请求仅支持 HTTP，但不支持跨域

Posted 2023-02-27

【中文标题】跨域请求仅支持 HTTP，但不支持跨域

【英文标题】：Cross origin requests are only supported for HTTP but it's not cross-domain

【发布时间】：2012-01-16 23:52:39

【问题描述】：

我正在使用此代码发出 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 服务器上，所有网站都在该服务器上运行，因此它不是跨域的。

我该如何解决这个问题？

【问题讨论】：

您是否尝试过使用 HTTP URL 而不是本地路径？

我建议使用完整的网址

@EdwardThomson 成功了！但是现在我必须在我的服务器配置中设置allow_url_include = On。

"Cross origin requests are only supported for HTTP." error when loading a local file的可能重复

【参考方案1】：

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

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

阅读类似：

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

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

【讨论】：

这就像一个魅力。现在我必须在我的服务器配置中设置allow_url_include = On。我可以安全地启用它，否则会导致一些安全问题？

$.get实际上是在web浏览器的javascript上下文中发出的，所以该文件需要有URL引用——用php编写的代码仍然可以毫无问题地引用本地文件

另外还有 Python 解决方案：(1) 将控制台导航到文件夹，(2) 输入 python -m SimpleHTTPServer 8888，然后 (3) 将浏览器导航到 http://localhost:8888/

+1 这对resolve 我的问题有很大帮助。非常感谢:)

Python 3 用户注意事项：使用python -m http.server 8888

【参考方案2】：

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

到“目标”路径的末尾

【讨论】：

原则上适用于 Google Chrome（至少从 v24 开始），但请注意，在 OS X 上，您必须按如下方式调用它：open -a 'Google Chrome' --args —allow-file-access-from-files。另请注意：如果您指定基于 file:// 的 URL（而不是文件系统路径），请务必使用 file://localhost/... 而不是 file:///...。

上次我尝试在 Windows 中执行此操作时，上述方法不起作用。我最终不得不从 DOS 提示符下启动 chrome，开关如下...不完美但可行。

在 Linux 上运行良好。

在 OS X Yosemite 10.10.2 和 Chrome 版本 41.0.2272.89（64 位）上运行良好。

【参考方案3】：

如果您正在处理一个小型前端项目并想在本地测试它，您通常会通过在网络浏览器中指向本地目录来打开它，例如输入 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

【讨论】：

惰性解决方案很棒。非常简单，您无需执行任何其他操作。

等价物也存在于 node.js 中：simple-http-server

在 Windows 8.1 上，你还需要安装 Python 吗？

我在windows上使用Xampp，很简单，虽然我推荐使用node，也不要忘记在skype上解锁端口80以允许服务器运行

【参考方案4】：

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

安装 express npm install express

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

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

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

node server.js

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

【参考方案5】：

这种方式效果最好。确保这两个文件都在服务器上。调用 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);
                            
                        );
                    
                );
            );

【参考方案6】：

如果你安装了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

【参考方案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

用你的更改 chromeLocation 路径。

将以上内容另存为 .bat 文件。

将文件拖放到您创建的批处理文件上。 （chrome确实提供了恢复页面 选项虽然如此，如果您打开页面，只需点击恢复即可）。

【参考方案8】：

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

例如：

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

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

【参考方案9】：

对于所有 python 用户：

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

cd projectFoder

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

python -m http.server 8000

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

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

享受:)