angular4跨域2018-03-06

对于angular4来说，建立一个纯前端的轻量级的项目（前后端分离），会遇到一个跨域访问后台的问题。解决办法如下：

在项目根目录（与package.json文件位置相同），新建一个JSON文件，可以命名为proxy.config.json，其内容如下：

{

"/api": {

"target": "跨域目的ip地址",

"secure": false,

"logLevel": "debug",

"pathRewrite": { "^/api": "" }

}

}

同时在package.json文件找到script，在start后加上一句：

--proxy-config proxy.config.json

题外话，如果需要手机访问页面，只需在后面多加一句，

--proxy-config proxy.config.json --host xx.xx.xx.xx(项目运行的主机ip)

这样的话，运行项目需要的指令变为：npm run start

同时，项目不会自动在网页打开，打开方式变为本机IPxx.xx.xx.xx:4200(端口号),同时手机也可以访问这个地址来访问项目，需在同一局域网下。

配置好api后，需要访问后台就可以跨域，举例说明，登陆时，需要访问localhost:8080端口的loginUser服务。

首先将api配置为http://127.0.0.1：8080,访问后台服务就变为/api/loginUser，如此而已。