Angular學習：http請求失敗的問題

1 問題

在學習angular時，以下代碼的http的post請求一直失敗。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/Rx';

import { Http, Headers, Request, Response, RequestOptions, RequestMethod } from '@angular/http';
import { RequestArgs } from '@angular/http/src/interfaces';
import { UserModel } from '../user-model';

@Injectable()
export class UserLoginService {
    public subject: Subject<UserModel> = new Subject<UserModel>();
    public userLoginURL = "http://localhost:8899/login";
  
    constructor(public http:Http) {
        console.log("Angular2---------UserLoginService.constructor");
    }
  
    public get currentUser():Observable<UserModel>{
        return this.subject.asObservable();
    }

    public login(user: UserModel){
        console.log("Angular2---------UserLoginService.login");

        let body = JSON.stringify(user);
        let headers = new Headers();
        headers.append("Content-Type", "application/json;charset=UTF-8");
        
        return this.http.post("http://localhost:8899/login", body, {headers: headers})
        .map((response: Response)=>{
            console.log("Angular2---------UserLoginService.login Response : " + JSON.stringify(response.json()));
            let data = response.headers;
            return data;
        })
        .subscribe(
                data => {
                    console.log("Angular2---------UserLoginService.login subscribe data : " + JSON.stringify(data.toJSON()));
                },
                error => {
                    console.log("Angular2---------UserLoginService.login err");
                    console.error(error);
                }
        );
        
        
    }

}
           

在firefox的調試工具下，可以看到 [OPTIONS XHR http://localhost:8899/login ]出錯了。

由于第一次學習web開發，一直糾結于

為什麼代碼中的POST方法變為OPTIONS方法？

直到打開了firefox的調試工具的[安全]log輸出，發現上述出錯log之下有以下log。

已攔截跨源請求：同源政策禁止讀取位于 http://localhost:8899/login 的遠端資源。（原因：CORS 頭缺少 'Access-Control-Allow-Origin'）。

2 原因

由于在firefox的位址欄輸入的位址(angular的請求位址)是[http://localhost:4200]，和代碼中post方法指定的位址[http://localhost:8899]不同源，

是以在每次http請求之前，都會向伺服器[http://localhost:8899]發1次OPTIONS請求，确認伺服器是否容許跨源請求。

而伺服器沒有做跨源CORS設定，是以每次OPTIONS請求都會出錯。

3 解決問題

在伺服器追加跨源設定。具體做法請參照：http://blog.csdn.net/superpeepi_csdn/article/details/72625521

有無跨源CORS設定時的OPTIONS請求，請參照：

https://my.oschina.net/superpeepi/blog/906612

https://my.oschina.net/superpeepi/blog/906620