错误消息“无法加载 XMLHttpRequest。 AngularJS 中的 HTTP 仅支持跨源请求答案

【问题标题】：Error message 'XMLHttpRequest cannot load. Cross origin requests are only supported for HTTP in AngularJS'错误消息“无法加载 XMLHttpRequest。 AngularJS 中的 HTTP 仅支持跨源请求
【发布时间】：2014-04-17 03:06:18
【问题描述】：

这是我的代码：

MyAppModule.factory('EventData', function($http,$log){
    return {
        getEvent : function(successcb){

            $http({method: 'GET', url: './js/Services/products.json'}).

            success(function(data) {
                $log.info("success");
            }).
            error(function(data) {
                $log.info("error");
            });
        }
    };
});

我在本地有一个简单的 JSON 文件，我正在尝试使用 AngularJS 的 http 方法读取它。我收到以下错误：

XMLHttpRequest 无法加载 file:///C:/Users/Avraam/Documents/GitHub/AngularJS/app/js/Services/products.json 跨源请求仅支持 HTTP。角.min.js:73 错误：发生网络错误。

我的错误是什么？我没有使用任何服务器；我只是用 Chrome 打开我的索引文件。这是错误吗？如果我想使用http 方法，我应该使用服务器吗？

【问题讨论】：

是的，您应该设置一个 HTTP 服务器应用程序来托管页面和 JSON。 file:// 通常不允许使用 Ajax。
如果你有 Python，你可以通过在包含 index.html 的目录中运行 python -m SimpleHTTPServer 来启动一个服务器。这些页面可在 127.0.0.1:8000 访问，并且不受本地页面的限制。否则，XAMPP 或 WAMP 无论如何都在那里。

标签： javascript angularjs

【解决方案1】：

如果这是用于本地开发并且您使用的是 Chrome，则需要使用几个参数来运行 Chrome 以放松安全性，如下所示：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

【讨论】：

如果你在 Mac 上运行？
这并不理想，因为我的工作不支持 Safari，而 Chrome 支持。
使用本地开发服务器提供页面，此限制不适用。使用 XAMPP，或者如果你有 python，只需运行python -m SimpleHTTPServer，你应该有一个服务器正在运行。
如果我想部署我的应用程序我应该怎么做？

【解决方案2】：

我通过在服务器上运行我的页面解决了这个问题，就像这样

cd /path/to/dir/with/the/index/file
python3 -m http.server

然后在浏览器中打开http://localhost:8000。

有关服务当前目录的其他方式，请参阅this question。

【讨论】：

您可以通过使用实时服务器来增强此工作流程，当您编辑和保存页面时，它会自动刷新您的页面以进行更改。 github.com/tapio/live-server

【解决方案3】：

对于 Mac 用户，相应的命令是：

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files --disable-web-security

更新：

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --allow-file-access-from-files --disable-web-security

Source

【讨论】：

使用 --disable-web-security 标志导致 Chrome 给我一些不受支持的标志错误。我删除了它，它起作用了。

【解决方案4】：

如果你在 Windows 环境，并且使用 npm 进行包管理，最简单的方法是全局安装 http-server：

npm install -g http-server

然后只需在您的任何项目目录中运行 http-server：

Eg. d:\my_project> http-server

Starting up http-server, serving ./ Available on: http:169.254.116.232:8080 http:192.168.88.1:8080 http:192.168.0.7:8080 http:127.0.0.1:8080 Hit CTRL-C to stop the server

很简单，而且没有意外打开浏览器易受攻击的安全风险。

【讨论】：

【解决方案5】：

以下命令对我有用。但是在命令之前，无论如何都需要停止chrome进程，可以从任务管理器

 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

另一种实现此功能的方法如下：首先，通过单击打开运行：Windows 按钮 + R 然后，复制并粘贴以下命令：

 chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

这将以禁用的安全模式打开 chrome 浏览器，您可以克服该错误。

谢谢

【讨论】：

【解决方案6】：

您可以使用 WAMP 或其他 Web 开发平台创建虚拟主机。

我没有问题。

【讨论】：

【解决方案7】：

运行一个 http 节点服务器并提供文件。

使用 NPM 安装 connect 和 serve-static

$ npm install connect serve-static
使用此内容创建 server.js 文件：

var connect = require('connect'); var serveStatic = require('serve-static'); connect().use(serveStatic(__dirname)).listen(8080, function(){ console.log('服务器运行在 8080'); });
使用 Node.js 运行

$ 节点服务器.js

您现在可以通过以下方式转到执行跨域请求的文件而不会出现任何错误：http://localhost:8080/yourfile.html

【讨论】：