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

问题描述

  var angularRoutingApp = angular.module（' （函数（$ 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，并显示在控制台中的错误消息是这样的：

XMLHttpRequest无法加载文件：/ /本地主机/用户/ multivideo /桌面/FTL-Angular/pages/home.html。只有HTTP支持跨源请求。 index.html：1

 错误：发生网络错误。 
 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）
在f（https://ajax.googleapis.com/ajax/libs /angularjs/1.2.8/angular.min.js:66:69）C处的
（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js： （https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:92:375）
在https：// ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:94:28 
在h。$ eval（https://ajax.googleapis.com/ajax/libs/angularjs /1.2.8/angular.min.js:102:293）h。$ digest处的
（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js ：100：50）
在h。$ apply（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:103:100）angular.js：9413 
  

解决方案

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

<1>你通常不应该从 file：// 开发。使用 MAMP ，内置的Apache Web服务器或其他方式来设置本地Web服务器。如果你在Mac上，正如我从你提供的路径中猜测的那样，你可以通过打开终端并输入

$> python -m SimpleHTTPServer 8080


这将在你调用它的文件夹中打开一个8080端口上的简单HTTP服务器来自。

2）您可以，但实际上不应放宽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: '/'
    });
    });

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 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 uses a fairly stringent same-origin policy. There are two things you can do:

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

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

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

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