关于javascript：仅支持HTTP的跨源请求，但它不是跨域的


Cross origin requests are only supported for HTTP but it's not cross-domain

我正在使用此代码发出AJAX请求：

1
2
3
4
5
6
7
8
$("#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 cannot load
file:///C:/xampp/htdocs/webname/resources/templates/signup.php. Cross
origin requests are only supported for HTTP.

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

我怎么解决这个问题？

相关讨论

我有幸用以下开关启动chrome：

1
--allow-file-access-from-files

在os x上尝试(如果复制粘贴，则重新键入破折号)：

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

在其他* nix运行(未测试)

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

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

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

到"目标"路径的末尾

相关讨论

如果您正在处理一个小型前端项目并想在本地测试它，您通常会通过将本地目录指向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中，以下命令是等效的：

1
python -m http.server 8000
相关讨论

您需要实际运行Web服务器，并对该服务器上的URI发出get请求，而不是向文件发出get请求;例如换行：

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

阅读类似的东西：

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

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

相关讨论

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

  • 安装快递
    npm install express

  • 在项目的根文件夹中创建一个server.js文件，在我的情况下，在我想要服务的文件上面的一个文件夹中

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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文件

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

    1
    npm install -g http-server

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

    1
    $ cd ~/projects/angular/current_project

    运行服务器：

    1
    $ http-server

    这将产生消息启动http-server，服务于：

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

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

    http://your_ip:8080/index.html

    它以这种方式效果最好。确保两个文件都在服务器上。在调用html页面时，请使用以下网址：http:://localhost/myhtmlfile.html，而不是C::///users/myhtmlfile.html。让我们也知道传递给json的网址是一个网址，如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    $(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);
                                }
                            });
                        }
                    });
                });