AngularJS指令在无服务器客户端项目中运行异常求助

这个问题我碰到过好多次了——本质是你直接用浏览器打开本地文件时，用的是file://协议，而浏览器的同源策略默认禁止这种协议下的跨域请求（哪怕是本地文件之间），所以AngularJS加载模板时就触发了报错，也就是你看到的Cross origin requests are only supported...和[$compile:tpload]错误。

下面给你几个靠谱的解决办法，按推荐程度排序：

1. 启动本地HTTP服务器（最推荐） #

这是最标准的本地开发方式，完全模拟生产环境的HTTP协议，从根源上解决跨域问题。推荐几个轻量的工具：

• Python内置服务器：如果你电脑上装了Python，打开终端/命令行，切换到你的www目录，运行：

  # Python 3版本
  python -m http.server 8000
  # Python 2版本
  python -m SimpleHTTPServer 8000
  

  然后在浏览器里访问http://localhost:8000/index.html，模板加载就正常了。

• Node.js的http-server：如果你用Node.js，先全局安装工具：

  npm install -g http-server
  

  同样切换到www目录，运行：

  http-server -p 8000
  

  访问http://localhost:8000/index.html即可。

2. 临时修改浏览器安全设置（仅限本地开发） #

这个方法不推荐长期用，因为会降低浏览器的安全性，只适合临时测试：

• Chrome浏览器：先关闭所有Chrome窗口，然后从命令行启动，加上允许file协议跨域的参数：
  • Windows：打开命令提示符，运行

    chrome.exe --allow-file-access-from-files
    

  • Mac：打开终端，运行

    open -a Google\ Chrome --args --allow-file-access-from-files
    

  注意：启动后别用这个浏览器窗口访问其他网站，用完就关掉，恢复正常设置。

3. 把模板内联到代码中（适合小型模板） #

如果你的模板内容不多，可以直接把模板写在指令里，或者嵌入到index.html中，避免HTTP请求：

• 直接在指令里用template属性：
  把blPage.html的内容复制到指令的template字段里，比如：

  angular.module('yourApp').directive('blPage', function() {
    return {
      restrict: 'E',
      // 替换成你blPage.html里的实际内容
      template: '<div class="bl-page"><h1>我的页面</h1></div>'
    };
  });
  

• 用ng-template嵌入index.html：
  在index.html里添加一个script标签，把模板内容放进去，指定id和你的templateURL一致：

  <script type="text/ng-template" id="./blPage.html">
    <!-- 这里粘贴blPage.html的所有内容 -->
    <div class="bl-page">
      <p>这是我的模板内容</p>
    </div>
  </script>
  

  这样你的指令还是用templateUrl: './blPage.html'，AngularJS会直接从内存缓存里读取模板，不用发请求。

内容的提问来源于stack exchange，提问作者lio lrn