Angular7 跨域代理

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

　一、在根目录下创建一个proxy.config.json代理配置文件，配置如下:

{
    "/apidata": {
        "target":"https://xxx.com:8080", // 实际接口地址
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
            "^/apidata": ""     // 在代理配置中指定如下的 pathRewrite 值，以移除路径末尾的 "apidata" 部分
        },
        "_comment":"备注信息"
    }
}

　　注意：

1. '/apidata'　作用：过滤出来以 ‘/apidata’开头的接口地址，这些接口就是需要代理接口
2. 'pathRewrite' 作用: 去掉实际接口地址前添加的虚拟串
3. '_comment' 作用: 无实际意义，仅仅是作为备注信息使用

　二、修改根目录下的angular的启动方式

　　　在package.json文件中添加启动命令配置，如下：

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json",
  },

　　

　三 、在angular.json文件中配置启动服务的代理配置

　　

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "matngular:build",
            "proxyConfig": "proxy.config.json"
          },
        },

四  使用

searchToDo(pageNum, pageSize,type,companyCode,ticketNumber,datefrom,dateto) {    // 查询 ToDo
        return this.get(`/apidata/flowable/task?page=${pageNum}&pageSize=${pageSize}&type=${type}&companyCode=${companyCode}&ticketNumber=${ticketNumber}&datefrom=${datefrom}&dateto=${dateto}`)
    }

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