javascript - 跨源问题 AngularJS 在 Eclipse 中的指令

Question

您好，我在 Eclipse 中使用 Angular JS 时遇到问题。我尝试使用指令。但是当我访问 index.html 文件时，我在加载指令模板时遇到了 Cors Origin 问题。

XMLHttpRequest cannot load file:///Users/fanjavaid/Documents/Research%20and%20Development/workspaces_angularjs/usedirectives/app/js/directives/ArticleInfo.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

这是我指令的 javascript :

app.directive('articleInfo', function() {
    return {
        restrict: 'E',
        scope: {
            info : '='
        },
        templateUrl: 'js/directives/ArticleInfo.html'
    }
});

这是我的指令模板:

<div class="title"><h1>{{ article.title }}</h1></div>
<div class="meta" style="font-size:11px;"><strong>{{ article.meta }}</strong>, <strong>Comments :</strong> {{ article.comments }}</div>
<div class="content">
    <p>{{ article.content }}</p>
</div>

如何处理？谢谢

Answer 1

看起来您正在浏览器中直接打开静态文件 index.html 并加载，您的指令正在调用以使用 templateUrl 获取模板，它始终将路径附加到浏览器中的当前路径，即 file://。这就是您的请求失败的原因。

如果您使用的是 Java，您可以将您的应用程序部署在任何服务器(如 Jetty 或 TomCat)上并访问您的 index.html 并且它会工作。