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

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

本文关键字：拒绝 策略 URI 访问 错误      更新时间：2023-09-26

在加载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");
            });
        }]);

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

示例:如果你把你的客户端代码(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 service

$http.get('yourFolder/data.json').then(function(response) {
        $scope.data = response.data;
      });
相关文章：