• 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 
     
    备注:只适合本地开发环境跨域处理,针对正式环境,前后端分离,访问打包后的文件,代理貌似不起作用,需要换用其他跨域处理方式。
     
     
  • 相关阅读:
    ios qq 分享 失败
    Collections在sort()简单分析法源
    C# char[]与string之间的相互转换
    uva 10837
    良好的互联网站点
    SVN库迁移
    Android 它们的定义View它BounceProgressBar
    #AOS应用基础平台# 添加了用户自己定义快捷菜单在平铺布局下的用户自己定义排序管理
    android 逆向project smail 语法学习
    Linux内核-系统调用
  • 原文地址:https://www.cnblogs.com/mycnblogs-guoguo/p/13920612.html
Copyright © 2020-2023  润新知