vue-element-admin实现全局代理跨域proxy详解

Myth丶恋晨 2022-11-18 01:49 785阅读 0赞

### 目录 ###

*   *  一 配置.env.development
     *  二 配置 vue.config.js
     *   *  1. 在\`devServer\`下新建\`proxy\`对象如下
         *  2. 注释掉mock虚拟请求
     *  三 全局代理
     *  举几个例子方便理解记忆（注意有无 ==/== 斜杠）

## 一 配置.env.development ##

声明一个全局变量`BACKGROUND_APPLICATION_URL = 'http://localhost:8080'` 为后台的url地址  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70]

## 二 配置 vue.config.js ##

### 1. 在`devServer`下新建`proxy`对象如下 ###

process.env.BACKGROUND\_APPLICATION\_URL 即为一中声明的变量值

proxy: {
        
          '/api': {
        
            target: process.env.BACKGROUND_APPLICATION_URL
            /*        pathRewrite: {
              '^/api': ''
            }*/
          }
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70 1]

这样的话就会把`http://localhost:8080/**/api` 或者 `http://localhost:8080/api`等以`/api`结束的url实现代理解决跨域,

### 2. 注释掉mock虚拟请求 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70 2]  
那么假如我想实现`/api1 /api2 /api3` 都可以跨域应该怎么办呢？

## 三 全局代理 ##

注意，本项目在进行前后台交互的时候，是从utils/request.js中获取request，request是封装好的axios(详情看下图)  
![在这里插入图片描述][20210411175124480.png]  
它在发送请求的时候会把请求链接后加上VUE\_APP\_BASE\_API的值，也就是说现在你的默认请求地址为http://localhost:8080/api/\***，而不是http://localhost:8080/**  
![在这里插入图片描述][20210411175425498.png]  
如果你不想这样，这时就需要重写路径,

pathRewrite: {
        
              '^/api': ''
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70 3]  
它的作用就是把你的url地址中的`/api`去掉并且不影响它通过代理实现跨域,也就是说你现在的请求地址又变回你原来的`http://localhost:8080/**`

这样是不是实现了全局的代理？？  
这样请求的时候就和往常的一样了，解决了只能请求以\*\*\*/api/\*\*\* 格式的接口

## 举几个例子方便理解记忆（注意有无 / 斜杠） ##

VUE_APP_BASE_API = '/'
    
    BACKGROUND_APPLICATION_URL = 'http://localhost:8080'
    
        proxy: {
        
          '/api': {
        
            target: process.env.BACKGROUND_APPLICATION_URL,
            pathRewrite: {
        
              '^/api': ''
            }
          }
        }

这样请求的是 `http://localhost:8080/` 没有通过代理

VUE_APP_BASE_API = '/api'
    
    BACKGROUND_APPLICATION_URL = 'http://localhost:8080'
    
        proxy: {
        
          '/api': {
        
            target: process.env.BACKGROUND_APPLICATION_URL,
            pathRewrite: {
        
              '^/api': ''
            }
          }
        }

这样请求的是 `http://localhost:8080` 通过代理跨域

VUE_APP_BASE_API = '/api'
    
    BACKGROUND_APPLICATION_URL = 'http://localhost:8080'
    
        proxy: {
        
          '/api': {
        
            target: process.env.BACKGROUND_APPLICATION_URL,
          }
        }

这样请求的是 `http://localhost:8080/api` 通过代理跨域

VUE_APP_BASE_API = '/'
    
    BACKGROUND_APPLICATION_URL = 'http://localhost:8080'
    
        proxy: {
        
          '/': {
        
            target: process.env.BACKGROUND_APPLICATION_URL,
            pathRewrite: {
        
              '^/': ''
            }
          }
        }

这样请求的是 `http://localhost:8080` 通过代理跨域

看到这里应该理解了吧，希望可以帮助到你

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70]: /images/20221022/bb7dd0ad3a964506bd7f661ad318c3e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70 1]: /images/20221022/cefcba14efd44d83a56c8ece0d2465a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70 2]: /images/20221022/d907d3cd069047e49dc6ce5a6a6b62bf.png
[20210411175124480.png]: /images/20221022/be23eac745b44a85aa3bea9baa026a47.png
[20210411175425498.png]: /images/20221022/dad8ecf7f8bd4ead8448c0bf66a9b3f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE1MzA2Mw_size_16_color_FFFFFF_t_70 3]: /images/20221022/6e22d5682682453bb3b67bcf54a235ea.png