Search code examples
javascriptangularjsangular-materialsame-origin-policy

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

I'm getting an error in the console while loading the angular.min.js (Error: Access to restricted URI denied). I guess it's because of the same origin policy, but I'm new to this and have no idea how to make this work. Do I have to set up a server or something?

Here's my 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>

and 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");
            });
        }]);
Solution

  • Look like you got problem about cross-site domain. It's belong to server site setting. Mean your server must allow client call from a specify domain

    Example : if you place your code client (angularjs, js..) at

    http://example.com/foo.html and call an api at http://apidomain.com/api/test .

    Cross-site issue will happens if you not config api server correct

    But when i look to your url : api.js -> may be issue is here because your server is not allow to get direct to api.js. You can test by pass an full url on browser for testing : http://yourdomain.com/api.js -> error will same

    UPDATE

    If you want get data from json, just use $http service

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