Angular2 Http đặt tiêu đề Access-Control-Allow-Origin và http CORS

Question

Tôi đang sử dụng Angular2 RC5 (lõi, http, v.v.) và cố gắng kết nối với máy chủ Node.js được bật CORS. Ứng dụng của tôi được tạo mới từ Angular-CLI (phiên bản: "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)); 
} 

...

Khi ứng dụng bắt đầu, móc OnInit đã gọi, tôi nhận được một lỗi trong giao diện điều khiển. Đây là thông báo lỗi mà tôi nhận được.

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(…) 

Nếu tôi thả ra khỏi options và header hoàn toàn, tôi đã nhận lỗi CORS nhưng tình trạng phản ứng 200 từ máy chủ. (Tôi đoán rằng Nếu tôi có thể vượt qua các tiêu đề chính xác, cần làm việc.)

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

Đây là lỗi từ giao diện điều khiển

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 

Có thể ai đó giúp đỡ, xin vui lòng? cảm ơn.

Answer 1

Tôi là một người mới, vì vậy hãy liên hệ với tôi, nhưng theo tôi, tiêu đề Access-Control-Allow-Origin phải được máy chủ Node.js phụ trợ trả về. CORS ở phía máy chủ bị tắt theo mặc định do bảo mật. Sử dụng câu hỏi sau để giúp bạn triển khai: How to allow CORS?

Answer 2

Sự cố của bạn do lỗi được giới thiệu trong rc5. Các XHRBackend cho Http đã được sửa đổi để chuyển đổi cơ thể của bất kỳ yêu cầu thành một chuỗi. Nó nhìn vào tiêu đề Content-Type và cố gắng gọi phương thức chuyển đổi thích hợp.

Trong mã của bạn ở trên, bạn đang đặt tiêu đề Content-Type thành application/json làm cho XHRBackend cố gắng chuyển đổi nó thành chuỗi. Tuy nhiên, vì bạn đang thực hiện yêu cầu GET, body là không, vì vậy ngoại lệ này đang bị ném.

Trong trường hợp của bạn, chỉ cần xóa tiêu đề Content-Type và mọi thứ sẽ hoạt động tốt.

Answer 3

Nó được viết về ở đây:

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

Để giải quyết

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

bạn cần phải thiết lập cơ thể để ''

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