• 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 }

      注意:

    1. '/apidata' 作用:过滤出来以 ‘/apidata’开头的接口地址,这些接口就是需要代理接口
    2. 'pathRewrite' 作用: 去掉实际接口地址前添加的虚拟串
    3. '_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 
     
    备注:只适合本地开发环境跨域处理,针对正式环境,前后端分离,访问打包后的文件,代理貌似不起作用,需要换用其他跨域处理方式。
     
     
  • 相关阅读:
    ubuntu故障处理
    最全http状态码
    go故障排查集锦
    docker知识11---docker service
    docker知识10---docker secret
    windows安装mysql
    信息收集
    模块
    Django:中间件
    Django:ORM单表操作
  • 原文地址:https://www.cnblogs.com/mycnblogs-guoguo/p/13920612.html
Copyright © 2020-2023  润新知