Question

我在加载angular.min.js时在控制台中出错（错误：访问受限制的URI被拒绝）。我想这是因为相同的原始政策，但我是新手，并不知道如何使这项工作。我是否必须设置服务器或其他东西？

这是我的HTML：

<!DOCTYPE html>
 <html lang="en" ng-app="myApp" ng-cloak>
  <head>
    <meta charset="utf-8">
    <title>my app</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">    
    <link rel="stylesheet" href="./style.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic, 700italic' rel='stylesheet' type='text/css'>
  </head>
  <body  layout="column" ng-controller="myctrl">
      <h1>Purchase Order</h1>
      <div>
        <div class="row">
          <label>Name</label>
          <label>Price</label>
          <label>Quantity</label>
          <label>Total</label>
        </div>
        <div class="row">
          <input/>
          <input/>
          <ol class="completions"></ol>
          <label>0</label>
          <label>0</label>
        </div>
        <div class="row">
          <input/>
          <input/>
          <ol class="completions">
            <li>Suggestion 1</li>
            <li>Suggestion 2</li>
            <li>Suggestion 3</li>
          </ol>
          <label>0</label>
          <label>0</label>
        </div>
      </div>
      <p>
      </p>
   <script src="../src/main.js"></script>
  </body>
</html>

和JS：

var myApp = angular.module('myApp', ['ngMaterial']);

         myApp.controller('myctrl', ['$scope', '$http', function($scope, $http){
            $http({
                method: 'GET',
                url: 'api.js' })
                .then(function(response) {
                $scope.products = response.data;
            }, function(error) {
                displayError("Something went wrong");
            });
        }]);

Answer 1

看起来你有关于跨站点域的问题。它属于服务器站点设置。意味着您的服务器必须允许来自指定域的客户端调用

示例：如果您将代码客户端（angularjs，js ..）放在

http://example.com/foo.html 并在http://apidomain.com/api/test致电api。

如果您没有配置api服务器正确

，则会发生跨站点问题

但是当我查看你的网址时：api.js - ＆gt;可能是问题在这里，因为您的服务器不允许直接到api.js.您可以通过浏览器上的完整网址进行测试以进行测试：http://yourdomain.com/api.js - ＆gt;错误也一样

<强>更新

如果你想从json获取数据，只需使用$ http service

$http.get('yourFolder/data.json').then(function(response) {
        $scope.data = response.data;
      });

错误：访问受限制的URI被拒绝 - 同源策略？

1 个答案: