Vite配置代理Proxy解决跨域问题小结

 

前言

我们在编写前端项目的时候,经常会遇到跨域的问题,当我们访问后端 API 的 URL 路径时,只要域名、端口或访问协议(如 HTTP 和 HTTPS)有一项不同,就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名,例如https://example.com/api/some_end_point,https://example.com/api/other_end_point,针对这两种情况,可以直接用同一个配置来解决,即代理配置。​

不管是 Vite 还是 Webpack,这些打包工具都支持设置前端代理,它们能够把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址,这样前后端就视为使用了相同的域名、协议和端口,就避免了跨域的问题,还能避免繁琐的反复编写域名。

 

配置 Vite Proxy

我们这里以 Vite 的配置为例,来看一下如何给 API 请求设置代理。在 Vite 编写的项目里边,有一个vite.config.js配置文件,里边是关于 Vite 的配置项,可以在里边配置代理。假如我们前端项目路径为http://localhost:3000,需要代理所有以/api开头的 API 请求,把它转发到http://localhost:3001,并且后端的 API 路径中不带/api前缀,需要自动去掉/api前缀,如下图所示:

// vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
server: {
  proxy: {
    "/api": {
      target: "http://localhost:3001",
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ""),
    },
  },
},
});

之后重启项目就可以了

 

小结​

前端跨域问题其实是一个安全问题,就是为了防止不同域名的服务之间进行互相访问,以避免恶意程序对后端资源进行非法获取。在开发的时候,我们就可以利用代理来把请求进行代理,把域名等改成一样的,这样就避免了跨越的问题。在 Vite 中设置代理,是在vite.config.js配置文件里,配置server属性,并在里边配置proxy配置项。代理可以配置多个,根据不同的 API 路径去请求不同的后端路径,本文里只配置了一个/api作为演示。

 

总结

关于Vite配置代理Proxy解决跨域问题的文章就介绍至此,更多相关Vite配置代理Proxy解决跨域内容请搜索编程宝库以前的文章,希望以后支持编程宝库

 computed 、created 、mounted先后顺序1.computed 、created 、mounted 的先后顺序created => ...