vite项目中配置反向代理

1.为什么需要反向代理?

如果我们是全栈开发工程师, 前后端一起写, 那么我们请求数据的时候会正常请求, 不会出问题

但是实际情况是, 前端和后端通常不是由一个人完成的

这个时候请如果不做处理, 前端向后端服务器请求数据就会报错

翻译过来,大致意思就是, 源网址http://localhost:5000访问XMLHttpRequest网址 http://47.139.199.52:5066/api/user/login 被同源策略阻止了.

2.同源策略和跨域请求

请求数据涉及两个网址, 假设 网址A 和 网址B,

一个网址基本上都是由5部分组成

例如: http://www.baudu.com:80/abc?query='a'

http 协议

www.baidu.com 域名

80 端口号

abc 路径

query 携带的参数

如果网址A 和 网址B 的 协议, 域名, 端口号都是一样的,那么我们说,网址A 和 网址B是同源的, 否则就是跨域 [路径和参数不一样是无关紧要的]

[如果端口号是80,则端口号可以省略. 市面上大部分项目都是这个端口号,所以我们基本上看不到端口号]

源是什么: 一个源就是一个请求地址的(协议+域名+端口号)

跨域是什么: 跨域是浏览器处于保护性质考虑的最核心最基础的安全策略

3.同源和跨域的本质举例

就像一个小孩子

同源: 就是在家里干什么,那什么都行, 顶多就是被爸妈打一顿

跨域: 就是取邻居家, 不管要做什么还是拿什么,都要得到邻居的允许, 否则就出问题了

所以解决跨域问题的本质 就是 得到要请求数据的服务器的允许

3.如何解决跨域问题呢?

有两种方式

1>后端配置: 配置cors,允许指定源或者所有源访问

这个略过,本次主要讲反向代理

2> 反向代理

什么是代理:

我们发起请求,是通过浏览器发的; 但是浏览器有同源策略的限制,所以跨域会出问题(在后端没有处理的情况下)

那么,我们绕开浏览器呢? 我们自己去搞一个服务器,帮我们发请求, 这样不就没有同源策略的限制了吗!

代理 就是帮我们创建一个虚拟的服务器,帮我们发请求获取数据

什么是正向代理和反向代理:

我们知道了什么是代理,那么什么是正向代理,什么又是反向代理呢?

正向代理: 就是自己正儿八经的搞一个服务器,去写后端,操作数据库,但是这好像又绕回去了.

反向代理: 就是别人帮我们创建一个虚拟的服务器,去帮我们发请求,获取数据,在平时,我们几乎都是用反向代理

4.在vue中如何配置反向代理呢?

1> .在你项目的配置文件中写入 server 配置项

//vite.config.ts
​
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//vant配置--按需导入,自动解析,可以直接在模板中使用vant组件
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
//配置@路径
import path from 'path'
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  //配置路径 @
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
  },
    
    
  //服务器配置
  server: {
    //配置端口
    //host: '0.0.0.0', //本机地址
    //port:5000,  //通过5000端口号访问
    
    //配置反向代理
    proxy:{
      //凡是以 /api 地址开头的请求, 都要做代理操作
      '/api':{
        //目的地址 => 代理服务器,需要向该地址发起请求
        target:'http://47.109.189.52:5566/api',
        //是否跨域
        changeOrigin:true,
        //是否重写  将路径中的 /api 重写为''  ,重写的是自己的路径地址
        //向存储数据的服务器发送请求的地址是  target中的地址 + 自己写的路径
        //如果不重写, 则请求地址中会有两个 /api 字符, 这样请求的地址就错了 
        rewrite:(path) => {
          console.log('http://47.109.189.52:5566/api',path.replace(/^\/api/,''));
          
          return path.replace(/^\/api/,'')          
        }
      }
    }
​
​
  }
​
})
​

2> 将你封装的ajax实例的基础路径改为 '/api'

或者没有封装实例的话, 使用地址直接将 '/api'前面的地址都省略掉

5.注意事项

配置反向代理,只在开发阶段可以使用/有效; 但是在部署项目的时候,也可以配置反向代理(我用的是宝塔)