概述

不管使用什么脚手架 
  
  
  
  
  
 ，配置代理都是绕不开的话题  
  
  
  
  
  
 ，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 后











，记得重启项目 
  
  
  
  
  
 ，否则不会生效

文章如有错误 
  
  
  
  
  
 ，恳请大家提出问题

 


 


 


 


 


 
，本人不胜感激  
 
 
 
 
 
。 不懂的地方可以评论 
 
 
 
 
 
，我都会 一 一 回复

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

 

 

 

 

 
，道阻且长