Angular开发环境跨域代理配置

2017-09-12

问题描述

API地址:

http://fastjee-gateway.com:5002/api/uc/info/{userId}

前端地址:

http://localhost:4200

为解决跨域问题, 我们希望在前端开发环境配置代理转发, 转发后的URL如下:

http://localhost:4200/uc/info/{userId}

新建proxy.conf.json配置文件

{
    "/uc/*": {
        "target": "http://fastjee-gateway.com:5002/api/uc/",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true,
        "pathRewrite": {
            "^/uc": ""
        }
    }
}

配置scripts (package.json)

"start": "ng serve -o --proxy-config proxy.conf.json",

使用

this.http.get('uc/info/' + userid)
    .subscribe((res) => {
        console.log(res);
    },(error) => {
        console.error(error);
    });

最终控制台打印如下:

[HPM] POST /uc/info/1 -> http://fastjee-gateway.com:5002/api/uc/info

注意: 此方法只适用于开发环境