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