Angular2 Http Access-Control-Allow-Origin and http CORS Header Header

Question

I am using Angular2 RC5 (kernel, http, etc.) and trying to connect to a Node.js server with CORS enabled. My application has been updated using Angular -CLI (version: "1.0.0-beta.11-webpack.2").

// src/app/app.component.ts ... ngOnInit () { const headers: Headers = new Headers(); headers.append('Accept', 'application/json'); headers.append('Content-Type', 'application/json'); headers.append('Access-Control-Allow-Origin', '*'); const options = new RequestOptions({ headers: headers }); this.http.get('http://localhost:9000/api/v1/users', options) .map((res: Response) => res.json()) .subscribe(users => console.log(users)); } 

...

When the application starts, the called OnInit hook received, I got an error in the console. Here is the error message I received.

 EXCEPTION: TypeError: Cannot read property 'toString' of null browser_adapter.js:84EXCEPTION: TypeError: Cannot read property 'toString' of nullBrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ application_ref.js:267ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.js:53ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.js:44ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474 zone.js:461 Unhandled Promise rejection: Cannot read property 'toString' of null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'toString' of null(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494 zone.js:463 Error: Uncaught (in promise): TypeError: Cannot read property 'toString' of null(…) 

If I completely remove options and header , I got a CORS error, but the response status is 200 from the server. (I assume that if I can pass the correct header, it should work.)

  this.http.get('http://localhost:9000/api/v1/users') .map((res: Response) => res.json()) .subscribe(users => console.log(users)); 

Below is the error from the console

 XMLHttpRequest cannot load http://localhost:4000/api/v1/users. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. browser_adapter.js:93EXCEPTION: Response with status: 0 for URL: null browser_adapter.js:84EXCEPTION: Response with status: 0 for URL: nullBrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423 Subscriber.js:229Uncaught Response with status: 0 for URL: null 

Can someone help please? thanks.

Answer 1

I'm a newbie, so carry me, but as far as I know, the Access-Control-Allow-Origin header should be returned by the Node.js. server Server-side CORS is disabled by default due to security. Use the following question to help you with your implementation: How do I enable CORS?

Answer 2

Your problem is caused by an error introduced in rc5. XHRBackend for Http been modified to convert the body of any request to a string. It looks at the Content-Type header and tries to call the appropriate conversion method.

In the above code, you set the Content-Type header to application/json , which causes XHRBackend to try to convert it to a string. However, since you are creating a GET request, body is NULL, this exception is thrown.

In your case, just remove the Content-Type header and everything should work fine.

Answer 3

It is written here:

https://github.com/angular/angular/issues/10612

To allow

 EXCEPTION: TypeError: Cannot read property 'toString' of null 

you need to set the body to ''

 headers.append('body', '');