无法在 Chrome 中使用文件协议打开 Angular 应用程序 [英] Can't open Angular app using file protocol in Chrome

问题描述

我在使用 angularjs 和 chrome 时遇到问题，这是代码:

Hi i have a problem with angularjs and chrome, this is the code:

   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 打开它，则不会使用 routerprovider 并在控制台中向我显示如下错误消息:

If i open the index.html with Opera, Firefox or safary i dont have any proble, but if i open this with Chorme dont work the routerprovider and show me a error message in the console like this:

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

XMLHttpRequest cannot load file://localhost/Users/multivideo/Desktop/FTL-Angular/pages/home.html. Cross origin requests are only supported for 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

推荐答案

Chrome 使用了相当严格的同源策略.您可以做两件事:

Chrome uses a fairly stringent same-origin policy. There are two things you can do:

1) 通常不应从 file:// 开发.使用 MAMP、您的内置 Apache Web 服务器 或其他设置本地 Web 服务器的方法.如果您使用的是 Mac，正如我从您提供的路径推测的那样，您可以通过打开终端并输入

1) You should not normally develop from file://. Use MAMP, your built-in Apache web server or some other way to set up a local web server. If you are on a Mac, as I surmise from the path you provide, you can launch a very simple Python-based http server by opening up terminal and entering

$> python -m SimpleHTTPServer 8080

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

This will open a simple HTTP server on port 8080 from the folder you invoked it from.

2) 您可以，但您真的不应该放宽 Chrome 的安全设置.这是可能的，但通常是不好的做法.

2) You can, but you really should not, relax your safety settings for Chrome. This is possible, but generally bad practice.

这篇关于无法在 Chrome 中使用文件协议打开 Angular 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！