Cannot GET http requests for Rest api in angular 2 - json

Question

Im trying to get http GET requests in angular 2 frontend using the Rest api created in magento 2.
\var\www\html\Angular2\sample-ng-http-master\web\app\app.component.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts" />
import "rxjs/add/operator/map";
import {Component, Input} from 'angular2/core';
import {Http} from 'angular2/http';
interface Person {
//name: string;
//age: number;
}
#Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<div>{{people | json}}</div>
`
})
export class AppComponent {
#Input() private people: Person[];
constructor(private http: Http) {
}
public ngOnInit() {
this.http.get('http://10.20.1.2:3000/data.json')
.map(response => {
console.log(response.json);
console.log(response.json());
return response.json()
})
.subscribe((items: Person[]) => {
console.log('items: ' + items);
this.people = items;
}, error => console.log(error))
}
}
Here if my try to get the json file (http://10.20.1.2:3000/data.json) as shown, Im able to get the json response.
What i need is i need to pass the API endpoint of the Magento 2 like this:
http://10.20.1.2/Magento2/index.php/rest/V1/customers/1
The above rest endpoint works perfect if i call from Postman client.
If i use the same URL(http://10.20.1.2/Magento2/index.php/rest/V1/customers/1) in app.component.ts file i get:
If I use the URl with port 3000 as:(http://10.20.1.2:3000/Magento2/index.php/rest/V1/customers/1) I get:
Response {_body: "Cannot GET /Mage_ang2/index.php/rest/V1/customers/1↵", status: 404, statusText: "Ok", headers: Headers, type: 2…
Which part am i missing?

Answer 1

You need to set headers:
Access-Control-Allow-Origin: 'your_angular_server_address'
and
Access-Control-Allow-Headers: 'Access-Control-Allow-Origin'
It is CORS problem.

Answer 2

You need to add the headers:
/**
* Interceptor set the headers for the request.
* Params:
* - objectToSetHeadersTo: Request or Arguments that will contain the headers.
**/
private setHeaders(objectToSetHeadersTo: Request | RequestOptionsArgs) {
const headers = objectToSetHeadersTo.headers;
headers.set('Content-Type', 'application/json');
if (this.token) {
headers.set('Authorization', 'Token ' + this.token);
}
}