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

IT技术 javascript
2021-02-04 11:09:11

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

我怎么解决这个问题?

6个回答

我很幸运使用以下开关启动 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

到“目标”路径的末尾

上次我尝试在 Windows 中执行此操作时,上述方法不起作用。我最终不得不从 DOS 提示符下启动 chrome 并跟随以下开关......不完美但可行。
2021-03-14 11:09:11
原则上适用于 Google Chrome(至少从 v24 开始),但请注意,在 OS X 上,您必须按如下方式调用它:open -a 'Google Chrome' --args —allow-file-access-from-files. 另请注意:如果您指定基于 file:// 的 URL(而不是文件系统路径),请确保使用file://localhost/...而不是file:///....
2021-03-15 11:09:11
在 Linux 上运行良好。
2021-04-03 11:09:11
在 OS X Yosemite 10.10.2 和 Chrome 版本 41.0.2272.89(64 位)上运行良好。
2021-04-05 11:09:11

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

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

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

这不是世界末日,有很多解决方案,包括旧的 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
我在 Windows 上使用 Xampp,这很简单,但我建议使用 node,也不要忘记在 Skype 上取消阻止端口 80 以允许服务器运行
2021-03-16 11:09:11
node.js 中也存在等价物: simple-http-server
2021-03-22 11:09:11
在 Windows 8.1 上,您仍然需要安装 Python,不是吗?
2021-03-23 11:09:11
懒惰的解决方案很棒。非常简单,你不需要做任何其他事情。
2021-04-03 11:09:11

您需要实际运行一个网络服务器,并向该服务器上的 URI 发出获取请求,而不是向文件发出获取请求;例如改变行:

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

阅读以下内容:

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

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

Python 3 用户注意事项:使用 python -m http.server 8888
2021-03-23 11:09:11
+1 这对解决我的问题有很大帮助非常感谢 :)
2021-03-24 11:09:11
或者,还有 Python 解决方案:(1) 将控制台导航到文件夹,(2) 输入python -m SimpleHTTPServer 8888,然后 (3) 将浏览器导航到http://localhost:8888/
2021-03-27 11:09:11
$.get 实际上是在 Web 浏览器的 javascript 上下文中发出的,因此该文件需要具有 URL 引用 - 用 php 编写的代码仍然可以毫无问题地引用本地文件
2021-03-31 11:09:11
这就像一个魅力。现在我必须allow_url_include = On在我的服务器配置中进行设置我可以安全地启用它还是会导致一些安全问题?
2021-04-02 11:09:11

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

  1. 安装快递 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

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

如果您安装了 nodejs,您可以使用命令行下载并安装服务器:

npm install -g http-server

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

$ cd ~/projects/angular/current_project 

运行服务器:

$ http-server 

这将产生消息正在启动 http-server,服务于:

可在: http://your_ip:8080http://127.0.0.1:8080

这允许您在浏览器中使用网址,例如

http://your_ip:8080/index.html