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

Can't open Angular app using file protocol in Chrome

本文关键字：协议 Angular 应用程序 文件 Chrome      更新时间：2023-09-26

嗨，我有一个问题与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或safari打开index.html，我没有任何问题，但如果我用chrome打开这个，不工作路由器提供程序，并在控制台上显示一个错误消息，如下所示:

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

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

1)通常不应从file://发展。使用MAMP，您的内置Apache web服务器或其他方式来设置本地web服务器。如果你使用的是Mac，根据你提供的路径，你可以通过打开终端并输入

来启动一个非常简单的基于python的http服务器。
$> python -m SimpleHTTPServer 8080

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

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

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

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

另一个选项是设置chrome允许XHR与文件协议允许谷歌chrome使用XMLHttpRequest从本地文件加载URL

除了@Chris vCB的回答，如果你想用php代替

php -S localhost:8080

(或任何你想要的domain::port)

相关文章：