0

angular.min.js를로드하는 중 콘솔에 오류가 발생했습니다 (오류 : 제한된 URI에 대한 액세스가 거부되었습니다). 나는 그것이 같은 기원 정책 때문에 인 것 같지만, 나는 이것에 익숙하지 않고이 일을하는 방법을 모른다. 서버 등을 설치해야합니까?오류 : 제한된 URI에 대한 액세스가 거부되었습니다 - 동일한 원본 정책이 있습니까?

<!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"); 
      }); 
     }]); 
+0

를 사용합니다 무엇 라인은 정확히 오류를 던집니까? 그리고 api.js에서로드하려고하는 것은 무엇입니까? – Kindzoku

+0

이 [게시물] (http://stackoverflow.com/questions/26805093/dynamic-directive-loading-using-angularjs-error-access-to-restricted-uri-deni) 도움이 될 수 있습니다. 네, 서버에 배포해야합니다. – Saad

+0

"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"는 오류 – summerfreeze

답변

2

봐 크로스 사이트 도메인에 대한 문제를 가지고

여기 내 HTML입니다. 서버 사이트 설정에 속합니다. 당신이

http://example.com/foo.html 에서 코드 클라이언트 (AngularJS와, JS를 ..) 배치하고 http://apidomain.com/api/test에서 API를 호출하는 경우 : 서버가에서 클라이언트 호출이 도메인을

예를 지정할 수 있어야 의미한다. 당신이 올바른 API 서버를 config (설정)하지 않을 경우

크로스 사이트 문제는 것이다 발생

하지만 난 당신의 URL로 볼 때 : api.js -> 서버가 API를 직접 얻을 수 있지 않기 때문에 문제가 여기에있다 할 수있다 .js. 테스트를 위해 브라우저 상에 전체 URL을 전달하여 테스트 할 수 있습니다 : http://yourdomain.com/api.js -> 오류가 같은

UPDATE

당신이 JSON 데이터를 얻기 원한다면, 단지 $ HTTP 서비스

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

예, api.js가 문제입니다. 그래도 나는 이제 API로 무엇을합니까? 아마 어딘가에 그것을 호스팅 할 수 있습니까? – summerfreeze

+0

당신이 Api를 어떤 언어로 쓰는지 모르겠다. 그 언어는 자바, 닷넷 일 수있다. Php, NodeJs ... 그리고 api 언어에 따르면, 서버가되도록 차이가 있습니다. –

+0

JSON이면 어떻게 될까요? – summerfreeze