vue 项目使用 vite工具，开发服务器配置 server.proxy 简要介绍（包含跨域配置）

概述

** 不管使用什么脚手架，配置代理都是绕不开的话题 ，server.proxy **为开发服务器配置自定义代理规则。期望接收一个 **

{ key: options }

对象。如果 key 值以

^

** 开头，将会被解释为 **

RegExp

。

configure

** 可用于访问 proxy 实例。官网地址

更多详细配置** http-proxy**

相关配置

在 **vue3 **项目中，找到 vite.config.ts 文件，在其中进行 vite 的相关配置.下面展示 选项 写法（可解决跨域问题）

server: {
    port: 8080,
    proxy: {
      "/api": {
        target: "http://localhost:7001", // 所要代理的目标地址
        changeOrigin: true,  //允许跨域
        ws: true,  // 开启 websockets 代理
        secure: false, // 验证 SSL 证书
        rewrite: (path) => path.replace(/^\/api/, ""),  // 重写传过来的path路径
      },
    },
  },

简要说明

    **前端跨域问题**其实是一个安全问题，就是为了防止不同域名的服务之间进行互相访问，以避免恶意程序对后端资源进行非法获取。在开发的时候，我们就可以利用代理来把请求进行代理，把域名等改成一样的，这样就避免了跨越的问题。

上面配置的 后端地址为 http://localhost:7001 ，代理以** /api 开头的所有 API 请求，并把它转发到http://localhost:7001**

**例如： 前端请求地址一般为简写 /api/user,**前端实际请求地址为 http://localhost:7001/api/user

实际转发到后端的地址是省略了 /api 的**，为 **http://localhost:7001/user

同时，也可以代理多个地址，例如

server: {
   proxy: {
      "/api": {
        target: "http://localhost:7001",
        changeOrigin: true,
      },
       "foo": {
          target: "http://localhost:7002",
          changeOrigin: true,
        }
    },
  },

注意

配置 vite.config.ts 后，记得重启项目，否则不会生效

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一 回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力 长路漫漫，道阻且长