主要记录一下项目开发中遇到的前端跨域处理
一、在根目录下创建一个proxy.config.json代理配置文件,配置如下:
1 { 2 "/apidata": { 3 "target":"https://xxx.com:8080", // 实际接口地址 4 "secure": false, 5 "changeOrigin": true, 6 "pathRewrite": { 7 "^/apidata": "" // 在代理配置中指定如下的 pathRewrite 值,以移除路径末尾的 "apidata" 部分 8 }, 9 "_comment":"备注信息" 10 } 11 }
注意:
- '/apidata' 作用:过滤出来以 ‘/apidata’开头的接口地址,这些接口就是需要代理接口
- 'pathRewrite' 作用: 去掉实际接口地址前添加的虚拟串
- '_comment' 作用: 无实际意义,仅仅是作为备注信息使用
二、修改根目录下的angular的启动方式
在package.json文件中添加启动命令配置,如下:
1 "scripts": { 2 "ng": "ng", 3 "start": "ng serve --proxy-config proxy.config.json", 4 },
三 、在angular.json文件中配置启动服务的代理配置
1 "serve": { 2 "builder": "@angular-devkit/build-angular:dev-server", 3 "options": { 4 "browserTarget": "matngular:build", 5 "proxyConfig": "proxy.config.json" 6 }, 7 },
四 使用
1 searchToDo(pageNum, pageSize,type,companyCode,ticketNumber,datefrom,dateto) { // 查询 ToDo 2 return this.get(`/apidata/flowable/task?page=${pageNum}&pageSize=${pageSize}&type=${type}&companyCode=${companyCode}&ticketNumber=${ticketNumber}&datefrom=${datefrom}&dateto=${dateto}`) 3 }
public get(url: string, params?: any) { let token = sessionStorage.getItem('token'); return this.http.get(url, { 'params': params, 'headers': { 'Authorization': 'Bearer ' + token } }); }
五 启动项目
ng serve 或者 npm run start
备注:只适合本地开发环境跨域处理,针对正式环境,前后端分离,访问打包后的文件,代理貌似不起作用,需要换用其他跨域处理方式。