Frontend employee Frontend employee - 1 year ago 263
JSON Question

XMLHttpRequest cannot load JSON angular

Just experimenting with Angular HTTP service and tried to run JSON with http service of Angular, but in the Chrome browser it would not load successfully. The console said:

XMLHttpRequest cannot load
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.

When I try to open JSON-file itself, it shows the json. But could not figure out what I do wrong.

var app = angular
.module("myModule", [])
.controller("myController", function ($scope, $http) {
.success(function(response) {
$scope.smartphones = response.records;

"records": [
"name": "Mamam",
"age": 12
"name": "Jal",
"age": 18
"name": "Ziyech",
"age": 22
"name": "Dolberg",
"age": 24


<!doctype html>
<html lang="eng">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="CSS/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="CSS/Styles.css" rel="stylesheet" type="text/css"/>

<script src=""" type="text/javascript"></script>
<script src="JS/angular-module.js" type="text/javascript"></script>

<body ng-app="myModule">
<div ng-controller="myController">
<h2>Names And Age Of</h2>
<li ng-repeat="smartphone in smartphones">
{{ + " : " + smartphone.age }}

Answer Source

it's a CORS issue.

You have to modify your backend service in order to accept CORS or in a test enviroment you can enable the Allow-Control-Allow-Origin: * extension that adds to response header rule - 'Access-Control-Allow-Origin: *'

For reference:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download