Error: Access to restricted URI denied - Same Origin Policy?

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 服务器，就会发生跨站问题

但是当我查看您的 url 时：api.js -> 可能是这里的问题，因为您的服务器不允许直接访问 api.js。您可以通过在浏览器上传递完整的 url 进行测试：http://yourdomain.com/api.js -> 错误将相同

更新

如果您想从 json 获取数据，只需使用 $http 服务

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

Error: Access to restricted URI denied - Same Origin Policy?

Error: Access to restricted URI denied - Same Origin Policy?

javascript

same-origin-policy

angularjs

angular-material