Angular7 跨域代理

主要记录一下项目开发中遇到的前端跨域处理　

　一、在根目录下创建一个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

备注：只适合本地开发环境跨域处理，针对正式环境，前后端分离，访问打包后的文件，代理貌似不起作用，需要换用其他跨域处理方式。

参考：https://angular.cn/guide/build#proxying-to-a-backend-server