使用角度路由时出现错误跨源请求仅支持协议方案：http

debugcn 发表于 Dev

普里扬卡·塔内贾

我正在做角度路由并收到此错误。

这是我的 html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/angular-route.min.js"></script>
    <script src="../Scripts/test.js"></script>

    <script src="../Controllers/about.js"></script>
    <script src="../Controllers/contact.js"></script>
    <script src="../Controllers/home.js"></script>
  </head>
  <div ng-app="MyApp">
    <body>
      <div class="navbar-header">
        <nav>
          <ul>
            <li><a href="#!/">Home</a></li>
            <li><a href="#!/about">About Us</a></li>
            <li><a href="#!/contact">Contact Us</a></li>
          </ul>         
        </nav>
      </div>

      <div ng-view>
      </div>

    </body>
  </div>
</html>

这是我的js文件。

var myapp= angular.module('MyApp',['ngRoute']);
myapp.config(function($routeProvider) {

  $routeProvider
  .when('/',{
    templateUrl: 'home.html',
    controller: 'mainController'
  })
  .when('/about',{
    templateUrl: 'about.html',
    controller: 'aboutController'
  })  
  .when('/contact',{
    templateUrl: 'contact.html',
    controller: 'contactController'
  });

});

阿伦

尝试检查以下代码。我希望这能帮到您。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>

<div ng-app="MyApp">

      <div class="navbar-header">
        <nav>
          <ul>
            <li><a href="#!/">Home</a></li>
            <li><a href="#!about">About Us</a></li>
            <li><a href="#!contact">Contact Us</a></li>
          </ul>         
        </nav>
      </div>

      <div ng-view>
      </div>

 </div>

<script>
var myapp= angular.module('MyApp',['ngRoute']);
myapp.config(function($routeProvider) {

  $routeProvider
  .when('/',{
    template: 'home page',
   // controller: 'mainController'
  })
  .when('/about',{
    template: 'about page',
   // controller: 'aboutController'
  })  
  .when('/contact',{
    template: 'contact page',
    //controller: 'contactController'
  });

});
</script>

<p>You can write the date in many different formats.</p>

</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。