Angular CLI–Avoid CORS issues

By default when using ng-serve, webpack will serve your Angular 2 content from http://localhost:4200. However when your backend is hosted on a different URI(which probably is the case) you get CORS errors when you try to call your backend:

One solution is to configure CORS on your backend, but if you want to host your frontend code and the backend on the same URI in the end, I have an alternative for you…

Angular-CLI allows you to specify a proxy file. In this proxy file you can specify a URI pattern and webpack will proxy these requests to your backend.

Let’s see some code:

• My Angular Component. To simplify the codebase I have put everything inside my component. A better way would be to embed the HTTP logic inside a service.

	import { Component,OnInit} from '@angular/core';
	import { Observable } from 'rxjs/Observable';
	import { Http, Response } from '@angular/http';
	import 'rxjs/add/operator/catch';
	import 'rxjs/add/operator/map';
	@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
	})
	export class AppComponent implements OnInit {
	title = 'app works!';
	private apiUrl = '/api/values';//'http://localhost:7667/api/values'; // URL to web API
	constructor (private http: Http) {}
	ngOnInit() {
	this.getValues().subscribe(r=> {});
	}
	getValues (): Observable<any[]> {
	return this.http.get(this.apiUrl)
	.map(this.extractData)
	.catch(this.handleError);
	}
	private extractData(res: Response) {
	let body = res.json();
	console.log(body);
	return body.data || { };
	}
	private handleError (error: Response | any) {
	// In a real world app, we might use a remote logging infrastructure
	let errMsg: string;
	if (error instanceof Response) {
	const body = error.json() || '';
	const err = body.error || JSON.stringify(body);
	errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
	} else {
	errMsg = error.message ? error.message : error.toString();
	}
	console.error(errMsg);
	return Observable.throw(errMsg);
	}
	}

view raw app.component.ts hosted with ❤ by GitHub

• A proxy.config.json file. In this file I specify a URI pattern and the target URI.

	{
	"/api/*": {
	"target": "http://localhost:7667/",
	"secure":false
	}
	}

view raw proxy.config.json hosted with ❤ by GitHub

To invoke the application we have to specify the proxy.config.json path when calling ng serve:

ng serve –proxy-config proxy.config.json

That’s it!