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解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
如何在ElementUI的上传组件el-upload中设置header
这篇文章主要介绍了如何在ElementUI的上传组件el-upload中设置header，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在本篇文章和里小编给各位总结了关于vue路由跳转传递参数的三种方式以及相关代码，需要的朋友们可以学习下。2020-05-05
前些日子了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,所以下面这篇文章主要给大家介绍了关于vue中如何利用mqtt服务端实现即时通讯的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了Vue+Element UI实现下拉菜单的封装代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
下面小编就为大家分享一篇vue结合Echarts实现点击高亮效果的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了Vue分页插件的前后端配置与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
解决Vite无法分析出动态import的类型,控制台出警告的问题
这篇文章主要介绍了解决Vite无法分析出动态import的类型,控制台出警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue 中使用 bimface详情,分别有安装 vue 脚手架、创建项目、引入 bimface 响应的文件、修改 App.vue 文件，实现页面渲染等步骤，需要的小伙伴可以参考一下2021-12-12
这篇文章主要介绍了vue通过tailwindcss实现class动态绑定,文中给大家介绍了一些常用类名语法记录，对vue动态绑定class相关知识感兴趣的朋友一起看看吧2023-07-07
Element-ui DatePicker显示周数的方法示例
这篇文章主要介绍了Element-ui DatePicker显示周数的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
最新评论