在开发经贸大学的实训室管理项目时,使用了前后端分离的开发模式,这样就不可避免地碰到跨域问题。
解决跨域问题的办法就是使用前端代理。
- 首先在项目目录下新建一个名为
proxy.config.json
的文件,文件内容如下:
{
"/labm": {
"target": "http://192.168.1.253:8080", // 后台的服务器地址
"secure": "false" //根据个人需求添加是否要跨域传cookie
}
}
其中/labm
是代理的名称,一般都是接口请求的ip地址后面的第一个参数名。
比如后台地址是http://192.168.1.253:8080/labm/api/trainingRoom/list
,那么发起http请求时的地址就是这样:
getLabs(): Observable<any> {
return this.http.get('/labm/api/trainingRoom/list');
}
因为http://192.168.1.253:8080
已经被代理到/labm
上!
- 然后配置
package.json
文件:
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"mock": "json-server -c ./mock/json-server.json ./mock/data.json"
},
- 重启项目,执行命令,就可以跨域了:
npm run start
网友评论