最近在看Angular2，由于前后端分离，且开发阶段没有部署nginx作为反向代理，导致在调试http接口时出现跨域访问(CORS)问题。搜了一下网上有资料提示可以设置代理，转发http请求，解决跨域问题。但查了不少资料，基本都没有记述所有的修改点信息。
通过整合各资料的信息，最终设置成功，在此对所有修改点进行记录。

一、前提

• 本文中涉及的工具/组件基于以下版本，其他版本不能保证完全可用。

• 阅读者须事先掌握的知识
  1. 能够正确安装nodejs
  2. 能够通过npm安装angluar-cli
  3. 能够使用angluar-cli创建工程
  4. 了解angluar自带的Http或HttpClient的使用方法

二、接口调用代码示例

• 封装的HTTP工具类示例

import {HttpClient, HttpHeaders, HttpParams, HttpResponse} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import {Injectable} from "@angular/core";

@Injectable()
export class HTTP {

  constructor(private http: HttpClient) {

  }

  get<T>(url:string, params: HttpParams, token?: string): Observable<T> {
    let headers: HttpHeaders = new HttpHeaders();
    headers.append('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
    headers.append('x-auth-token', token);

    return this.http.get<T>(url, {
      params: params,
      headers: headers,
    });
  }

  post<T>(url:string, params: HttpParams, token?: string): Observable<T> {
    let headers: HttpHeaders = new HttpHeaders();
    headers.append('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
    headers.append('x-auth-token', token);

    return this.http.post<T>(url, params, {
      headers: headers
    });
  }
}

• 调用代码

import { Injectable } from '@angular/core';
import {HttpParams} from '@angular/common/http';
import {Observable} from "rxjs/Observable";
import {Response} from "../../model/response/response";
import {HTTP} from "../../util/http";

@Injectable()
export class AuthService {

  constructor(private http: HTTP) { }

  /**
   * 用户登录
   * @param {string} name
   * @param {string} password
   * @returns {Observable<Response>}
   */
  login(name: string, password: string): Observable<Response> {

    const params = new HttpParams()
      .set('name', name)
      .set('password', password);

    return this.http.post<Response>('/api/user/login', params);
  }
}

• 后台代码省略

三、添加代理配置文件

在工程根目录下添加json格式代理配置文件，名字可以自定，建议使用proxy.config.json

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

根据前期的设计，所有接口调用均在/api路径下如示例代码中的/api/user/login，因此此处配置代理匹配规则为/api/*，即所有以/api开头的http请求，均通过代理进行转发。

target：转发的目的地址，当页面请求满足匹配规则时，请求被转发至target指向的地址，在未配置pathRewrite的情况下，请求中的所有路径和参数会被同时转发到目的地址。

secure：指定是否验证SSL证书，开发环境基本不会走https协议，此处默认false。

pathRewrite：转发时地址的rewrite规则。我的后台接口中，所有接口的路径中并没有/api这层路径，因此需要通过"pathRewrite": {"/api" : ""}将请求中的/api删除。

本人非专业的前端开发，对前端的工具链谈不上熟悉，最开始在网上查proxy的资料时，以为这个proxy是Angular提供的功能，后来在stack overflow看到一篇回答，才发现这个proxy其实是webpack提供的功能。
详细设置可参考以下文档：

• webpack-dev-server#proxy
• http-proxy-middleware

四、开启proxy启动服务

使用命令ng serve --proxy-config proxy.config.json启动服务，此时符合转发规则的请求就会被代理愉快的转发了。

五、后记

实际使用过程中，发现代理转发有时正常，有时请求会一直处理pending状态。
从测试的结果看，需要先启动前端服务，然后在启动后台服务，才能顺利转发。