Angular学习总结-跨域配置

日常开发中，接口联调，跨域问题不可避免。下面将Angular如何跨域做一个分享。
假如，对接某接口完整地址为：https://172.168.1.20:2330/api/test/getList

第一步：新建proxy.config.json文件

在package.json同级目录下新建proxy.config.json文件。
并添加内容：

{
	"/api": {
		"target": "https://172.168.1.20:2330", // 需要代理的接口IP和端口或域名
		"secure": true, // 若为https接口，则为true;否则为false或不配置
    	"changeOrigin":true, // 是否跨域
    	// "ws": true, // 若代理地址是 websockets，则配置此参数
    	// "pathRewrite": {"^/api" : "/"} // 若配置此项，“/”替换“/api”,此例子可不配置
	}
}

第二步：改请求接口地址

将接口请求地址，从“https://172.168.1.20:2330/api/test/getList”改为“/api/test/getList”。

第三步：改package.json文件

修改启动命令。在"scripts"下的“start”参数值后添加“–proxy-config proxy.config.json”。

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build --prod --base-href ./",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},

第四步：重启项目

重启项目即可。