无法在 Chrome 中使用文件协议打开 Angular 应用程序答案

【问题标题】：Can't open Angular app using file protocol in Chrome无法在 Chrome 中使用文件协议打开 Angular 应用程序
【发布时间】：2014-06-25 12:45:03
【问题描述】：

您好，我对 angularjs 和 chrome 有疑问，代码如下：

   var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute'])

   // Configuración de las rutas
   .config(function($routeProvider) 
   {

 $routeProvider
    .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
    })
    .when('/artistas', {
        templateUrl : 'pages/artistas.html',
        controller  : 'artistasController'
    })
    .when('/login', {
        templateUrl : 'pages/login.html',
        controller  : 'loginController'
    })
    .otherwise({
        redirectTo: '/'
    });
    });

如果我用 Opera、Firefox 或 safary 打开 index.html，我没有任何问题，但如果我用 Chorme 打开它，则路由器提供程序不工作，并在控制台中显示如下错误消息：

XMLHttpRequest 无法加载文件：//localhost/Users/multivideo/Desktop/FTL-Angular/pages/home.html。仅 HTTP 支持跨源请求。 index.html:1

Error: A network error occurred.
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:72:206
at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:68:99)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:66:69)
at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:92:375)
at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:92:375)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:94:28
at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:102:293)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:100:50)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:103:100) angular.js:9413

【问题讨论】：

标签： javascript angularjs google-chrome

【解决方案1】：

Chrome 使用相当严格的同源策略。您可以做两件事：

1) 你通常不应该从file:// 开发。使用MAMP、your built-in Apache web server 或其他方式设置本地 Web 服务器。如果您在 Mac 上，根据您提供的路径推测，您可以通过打开终端并输入来启动一个非常简单的基于 Python 的 http 服务器

$> python -m SimpleHTTPServer 8080

这将从您调用它的文件夹中的端口 8080 打开一个简单的 HTTP 服务器。

2) 您可以但确实不应该放松 Chrome 的安全设置。这是可能的，但通常是不好的做法。

【讨论】：

【解决方案2】：

您应该有一个网络服务器正在运行。使用file:// 打开它会在某些浏览器中启用保护，这会阻止您运行部分代码，例如 ajax 调用。

最好的解决方案是运行一个网络服务器，特别是因为 Angular 自带一个。例如，我使用 yeoman，我可以运行 grunt serve。在这里呻吟https://docs.angularjs.org/tutorial/step_00

另一个选项是设置 chrome 以允许 XHR 使用文件协议Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

【讨论】：

【解决方案3】：

除了@Chris vCB 的回答，如果你愿意，你可以使用 php 来代替

php -S localhost:8080

（或任何你想要的域::端口）

【讨论】：