使用Vue脚手架配置代理服务器的两种方式

向右看齐 2023-09-23 15:41 31阅读 0赞

## 1 前言 ##

本文主要介绍使用Vue脚手架配置代理服务器的两种方式

注意：Vue脚手架给我们提供了两种配置代理服务器的方式，各有千秋，使用的时候只能二选一，不能同时使用

## 2 代理 ##

除了cros和jsonp，还有一种代理方式，这种用的相对来说也很多， 一般代理服务器

这个概念很好理解，相当于生活中的中介

在前后端直接配置一个代理服务器，这个代理服务器和前端处于一个位置，当前端向后端请求数据的时候，不会直接访问后端，而是找这台代理，代理收到前端的请求，转发给后端，如果收到后端的响应数据，就把这些数据返回给前端

代理服务器的方式有一个东西大家应该都听说过：nginx，但是nginx一般属于后端人员掌握的，这里使用一种对前端人员更加友好的技术：cli，没错，就是vue的脚手架，它就可以帮助我们代理服务器，相比nginx它简单的不能再简单了，只需要短短几行代码就可以搞定

## vue脚手架配置方式1 ##

既然想对脚手架进行配置，肯定要改一个文件，就是vue的配置文件：vue.config.js，肯定要在这里面写代码，然后代理服务器就开起来了，到底怎么写，可以参考官方文档：[Vue脚手架代理][Vue]  
![在这里插入图片描述][4dcd36d8da1e4c618488f7db73453d95.png]  
复制配置代码进行修改配置文件

注意：这里的端口是要请求后端的端口，并且只需要写到端口即可，我的后端端口是9090

// 开启代理服务器
    devServer: {
        
      // 代理的端口是要请求后端的端口  写到具体的端口即可 不需要写具体的路径
      proxy: 'http://localhost:9090'
    }

注意：这种代理简单，但是不完美，原因在下面

![在这里插入图片描述][337dc5c46dcc4703aa984495e368c0b1.png]  
这样就配置了一个代理服务器，一定要重启脚手架

重启完成后再次访问，还是报错跨域问题！

![在这里插入图片描述][7d49023f87544d50a1e1d266f647485e.png]  
注意：虽然已经配置了代理服务器，但是还没用到这个代理，所以请求的时候不应该是后端的端口9090，而是代理的端口8080，这里就要写全路径了，不能和配置代理服务器的时候一样只写端口了  
![在这里插入图片描述][e3877fe7d9d04614b05fe38f284994c7.png]  
再次访问，发现正常了，说明代理有效  
![在这里插入图片描述][c7a592ac0a0e40c2a291d9f5e274468a.png]  
这种代理有两个误区(坑)，下面一一说明

### 两个误区(坑) ###

#### 误区1 ####

不能灵活的控制到底走不走代理

首先，这种代理不是什么都会代理给后端的，如果代理的东西前端有，就会直接返回，就不去找后端，比如下面这个例子

我在public目录写一个叫queryUserInfo的文件，没错，和后端的接口名称一样  
![在这里插入图片描述][f761ae7a8da442b3ab18f3f24b05314c.png]  
![在这里插入图片描述][aec7ec118d0648089fb1e168306d78d3.png]  
这时候请求就会发现，找到前端的内容就不会访问后端了  
![在这里插入图片描述][35f1827ced3e4eb1bbbb02c06e9ffd88.png]

#### 误区2 ####

这种代理只能代理一个服务器不能代理多个服务器，也就是说目前代理的8080只能把请求交给9090，不能转发给别人了

## vue脚手架配置方式2 ##

上面的代理方式，虽然简单，但是也有两个坑，不够完美，想要追求完美，还得是这种方式

那么这种方式怎么写呢？还是继续看官方文档：[Vue脚手架代理  
][Vue]

注意：这种配置代理和上面的配置代理只能二选一，不能同时使用！  
![在这里插入图片描述][461c6b6422044ad49bb3eacbbfcd8a66.png]  
把代码复制到配置文件，进行修改

devServer: {
        proxy: {
        '/api': {
        target: '<url>',ws: true,changeOrigin: true},'/foo': {
        target: '<other_url>'}}}

这里面有一些属性，有的属性可以配置使用，我们一一说明

注意：不管修改哪个属性，都要重启vue！

### /api和target ###

/api指的是请求前缀 这里的api可以更改 不一定非要叫api

target指的是如果请求前缀匹配上了，那么就找代理服务器请求

比如现在我请求的路径不变还是上面的路径  
![在这里插入图片描述][9aea42269d9042ecb32b4b8a59250315.png]  
那么还是一样的效果

![在这里插入图片描述][e4694ab3f4114cc4979c8a350ec74ecf.png]  
这时候我把api前缀加上，理论来说可以了，但是还是不行  
![在这里插入图片描述][21f3a572a9cd4d068d560bf72ff89591.png]  
不过这次不是跨域的问题了，只是找不到请求  
![在这里插入图片描述][31985816aca547bdb75bc67ab2df2815.png]

找不到请求是对的，因为的后端请求没有/api的前缀，那么如果忽略这个前缀呢？

### pathRewrite ###

有这么一个属性，官方没有说：pathRewrite

// 忽略前缀路径 它是一个对象 里面是key value
            // 这个正则意思是 如果前缀是/api,那么会替换成空字符
          pathRewrite:{
        '^/api':''}

![在这里插入图片描述][fe537eea234b485c9bab18a96992c5bc.png]  
这个时候再测试，发现正常  
![在这里插入图片描述][93d4ab8bf5134caf807158b48723b077.png]

### ws ###

ws是websocket的缩写，用于支持websocket，默认为true,本人对websocket不是很了解，所以不多叙述！

### changeOrigin ###

用于控制请求头中的host值

或者说是否真实汇报自身情况 true不真实 false真实 一般为true,默认也是true

为什么这么说呢？我们通过下面案例查看，这时候我后端获取请求的主机信息，大家注意观察  
![在这里插入图片描述][0a54b032ef544e2282518e4163f3c37c.png]  
![在这里插入图片描述][c1520bb2939b44cab2764bed8f05c459.png]  
改为false,好家伙，你小子反水是吧  
![在这里插入图片描述][95db9b3b63eb49d7a2274e2685ba1dd2.png]  
![在这里插入图片描述][e37d134363324f94a86cf0703f33e946.png]

### 配置多个代理 ###

如果想要配置多个代理，直接复制一个即可，注意加上逗号,修改端口和前缀  
![在这里插入图片描述][62da3ea95baf4520b39b0bff8a2d1e31.png]

## 3 vue脚手架配置代理总结 ##

vue脚手架配置代理
    方法一
    在vue.config.js中添加如下配置：
    devServer:{
        
      proxy:"http://localhost:5000"
    }
    说明：
    1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
    2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
    3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
    方法二
    编写vue.config.js配置具体代理规则：
    module.exports = {
        
        devServer: {
        
          proxy: {
        
          '/api1': {
        // 匹配所有以 '/api1'开头的请求路径
            target: 'http://localhost:5000',// 代理目标的基础路径
            changeOrigin: true,
            pathRewrite: {
        '^/api1': ''}
          },
          '/api2': {
        // 匹配所有以 '/api2'开头的请求路径
            target: 'http://localhost:5001',// 代理目标的基础路径
            changeOrigin: true,
            pathRewrite: {
        '^/api2': ''}
          }
        }
      }
    }
    /*
       changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
       changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
       changeOrigin默认值为true
    */
    说明：
    1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
    2. 缺点：配置略微繁琐，请求资源时必须加前缀。

[Vue]: https://cli.vuejs.org/zh/config/#devserver-proxy
[4dcd36d8da1e4c618488f7db73453d95.png]: https://img-blog.csdnimg.cn/4dcd36d8da1e4c618488f7db73453d95.png
[337dc5c46dcc4703aa984495e368c0b1.png]: https://img-blog.csdnimg.cn/337dc5c46dcc4703aa984495e368c0b1.png
[7d49023f87544d50a1e1d266f647485e.png]: https://img-blog.csdnimg.cn/7d49023f87544d50a1e1d266f647485e.png
[e3877fe7d9d04614b05fe38f284994c7.png]: https://img-blog.csdnimg.cn/e3877fe7d9d04614b05fe38f284994c7.png
[c7a592ac0a0e40c2a291d9f5e274468a.png]: https://img-blog.csdnimg.cn/c7a592ac0a0e40c2a291d9f5e274468a.png
[f761ae7a8da442b3ab18f3f24b05314c.png]: https://img-blog.csdnimg.cn/f761ae7a8da442b3ab18f3f24b05314c.png
[aec7ec118d0648089fb1e168306d78d3.png]: https://img-blog.csdnimg.cn/aec7ec118d0648089fb1e168306d78d3.png
[35f1827ced3e4eb1bbbb02c06e9ffd88.png]: https://img-blog.csdnimg.cn/35f1827ced3e4eb1bbbb02c06e9ffd88.png
[461c6b6422044ad49bb3eacbbfcd8a66.png]: https://img-blog.csdnimg.cn/461c6b6422044ad49bb3eacbbfcd8a66.png
[9aea42269d9042ecb32b4b8a59250315.png]: https://img-blog.csdnimg.cn/9aea42269d9042ecb32b4b8a59250315.png
[e4694ab3f4114cc4979c8a350ec74ecf.png]: https://img-blog.csdnimg.cn/e4694ab3f4114cc4979c8a350ec74ecf.png
[21f3a572a9cd4d068d560bf72ff89591.png]: https://img-blog.csdnimg.cn/21f3a572a9cd4d068d560bf72ff89591.png
[31985816aca547bdb75bc67ab2df2815.png]: https://img-blog.csdnimg.cn/31985816aca547bdb75bc67ab2df2815.png
[fe537eea234b485c9bab18a96992c5bc.png]: https://img-blog.csdnimg.cn/fe537eea234b485c9bab18a96992c5bc.png
[93d4ab8bf5134caf807158b48723b077.png]: https://img-blog.csdnimg.cn/93d4ab8bf5134caf807158b48723b077.png
[0a54b032ef544e2282518e4163f3c37c.png]: https://img-blog.csdnimg.cn/0a54b032ef544e2282518e4163f3c37c.png
[c1520bb2939b44cab2764bed8f05c459.png]: https://img-blog.csdnimg.cn/c1520bb2939b44cab2764bed8f05c459.png
[95db9b3b63eb49d7a2274e2685ba1dd2.png]: https://img-blog.csdnimg.cn/95db9b3b63eb49d7a2274e2685ba1dd2.png
[e37d134363324f94a86cf0703f33e946.png]: https://img-blog.csdnimg.cn/e37d134363324f94a86cf0703f33e946.png
[62da3ea95baf4520b39b0bff8a2d1e31.png]: https://img-blog.csdnimg.cn/62da3ea95baf4520b39b0bff8a2d1e31.png