只有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服务器上,这是所有网站运行的地方,因此它不是跨域的.

我怎么解决这个问题？

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

到"目标"路径的末尾

Answer 2

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

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

Chrome和其他现代浏览器已经对Cross Origin Requests实施了安全限制,这意味着您无法通过file:///加载任何内容,您需要始终使用http://协议,甚至是本地-due Same Origin策略.就这么简单,您需要安装一个Web服务器来运行您的项目.

这不是世界末日,有很多解决方案,包括好的旧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 3

您需要实际运行Web服务器,并对该服务器上的URI发出get请求,而不是向文件发出get请求; 例如改变线:

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

阅读类似的东西:

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

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

Answer 4

我在尝试加载使用JSON数据填充页面的HTML文件时遇到了同样的错误,因此我使用了node.js和express来解决问题.如果未安装节点,则需要先安装节点.

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

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

Answer 5

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

npm install -g http-server

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

$ cd ~/projects/angular/current_project 

运行服务器：

$ http-server 

这将产生消息正在启动http服务器，服务于：

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

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

http://your_ip:8080/index.html