CORS 错误 - 收到 $compile 错误并且 XMLHttpRequest 无法加载错误？答案

【问题标题】：CORS Error - getting a $compile error and XMLHttpRequest cannot load error?CORS 错误 - 收到 $compile 错误并且 XMLHttpRequest 无法加载错误？
【发布时间】：2017-01-07 03:07:54
【问题描述】：

为什么即使我提供了正确的 url 也无法获取我的 Angular 指令 - 出现 $compile 错误并且 XMLHttpRequest 无法加载错误？

我从一个 Angular 应用开始，但我无法包含指令，因为我不断收到 2 个不同的错误。

XMLHttpRequest 无法加载/跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。

我进行了一些研究，有人建议设置服务器以避免我不理解的情况。如果我真的不需要它，为什么我不能只使用没有后端的 angular/html 来构建应用程序。什么可能导致该错误？

错误：$compile:upload

当模板的 URL 拼写错误时显然会发生这种情况 - 但是，我提供了从根目录 (templateUrl: 'js/navbar/navbar.html'）还是错了？谢谢你。

project1/index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="public/css/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js">    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script>
    <script src="js/app.js"></script>
   <script src="js/navbar/navbar.js"></script>
</head>

<body ng-app="myApp">
    <header></header>

    <navbar></navbar>
    <ui-view></ui-view>
</body>

</html>

project1/js/app.js

'use strict';
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);

project1/js/navbar/navbar.js

'use strict';

app.directive('navbar', function () {
    return {
        restrict: 'E',
        templateUrl: 'js/navbar/navbar.html'
    }
});

project1/js/navbar/navbar.html

<div class="navbar navbar-static-top navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
            Hello
            </li>
        </ul>
    </div>
</div>

【问题讨论】：

标签： angularjs compiler-errors xmlhttprequest url-routing angular-directive

【解决方案1】：

始终使用服务器来运行您的 Angular 应用程序，否则您可能会遇到跨源错误。服务器将帮助您解决文件路径。然后将您的指令编辑为

'use strict';
app.directive('navbar', function () {
    return {
        restrict: 'E',
        templateUrl: 'navbar.html'
    }
});

我做了一点plunker，所以我们确信您的代码没有错误。

我不确定是否使用绝对路径，但如果您要使用它，那么您必须输入类似：“C:projects/project1/js/navbar/navbar.js” 您可以使用 http-server，它易于安装和使用。希望能回答你的问题

【讨论】：

好的，谢谢。我刚刚添加了一个节点快递服务器，它现在可以工作了。您能解释一下为什么除非我创建服务器，否则 Angular 应用程序将无法工作吗？如果我使用简单的 html，它会起作用 - 与 angular 有什么区别？谢谢！
其实我错了。没有任何效果，我没有收到 XMLHttpRequest 错误，但仍然是指令引起的 $compile 错误（如果我从 index.html 文件中删除指令，错误就会消失）。我按照您的建议将 templateUrl: 'navbar.html' 更改为 'nabber.html'。