Vite代理如何解决跨域问题详解
前言
我们在编写前端项目的时候，经常会遇到跨域的问题，当我们访问后端 API 的 URL 路径时，只要域名、端口或访问协议（如 HTTP 和 HTTPS）有一项不同，就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名，例如 https://example.com/api/some_end_point，https://example.com/api/other_end_point，针对这两种情况，可以直接用同一个配置来解决，即代理配置。
不管是 Vite 还是 Webpack，这些打包工具都支持设置前端代理，它们能够把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址，这样前后端就视为使用了相同的域名、协议和端口，就避免了跨域的问题，还能避免繁琐的反复编写域名。
1.Vite Proxy
我们这里以 Vite 的配置为例，来看一下如何给 API 请求设置代理。在 Vite 编写的项目里边，有一个 vite.config.js配置文件，里边是关于 Vite 的配置项，可以在里边配置代理。假如我们前端项目路径为 http://localhost:3000，需要代理所有以 /api 开头的 API 请求，把它转发到 http://localhost:3001，并且后端的 API 路径中不带 /api前缀，需要自动去掉 /api前缀，如下图所示：
下面是端口从5173代理到8080
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8080', //目标url
changeOrigin: true, //支持跨域
rewrite: (path) => path.replace(/^\/api/, ""),
//重写路径,替换/api
}
}
}
})注意我先配置了axios的baseurl
// 请求
const service = axios.create({
baseURL: '/api',
timeout: 10000
})
也就是说 我请求request.get("/all") ，会解析成http://127.0.0.1:5173/api/all。
这里我请求http://127.0.0.1:5173/api/all 这是前端的请求。
http://127.0.0.1:8080/all 这里对应后端的接口。
前端
后端
2.参考文章
总结
到此这篇关于Vite代理如何解决跨域问题的文章就介绍到这了,更多相关Vite代理解决跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。2020-03-03
这篇文章主要介绍了Vue一个案例引发的递归组件的使用，本文主要给大家展示如何在项目中使用递归组件，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
vue-simple-uploader上传成功之后的response获取代码
这篇文章主要介绍了vue-simple-uploader上传成功之后的response获取代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧~2020-09-09
这篇文章主要介绍了vue项目安装使用vconsole方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
vue基于element-ui的三级CheckBox复选框功能的实现代码
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。这篇文章主要介绍了vue基于element-ui的三级CheckBox复选框功能的实现方法,需要的朋友可以参考下2018-10-10
最近一段时间，一直在做主题方面的工作。我们的主题，并不是简单切换一下颜色，或者排版变化这些，而是变化比较大的主题。比如说：主题1和主题2看起来完全不一样，功能甚至都不一样。这样，通过切换css就无法做到了，因此我思考良久，使用了如下2种方法2021-06-06
这篇文章主要介绍了vue中动态路由加载组件,找不到module问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍在Vue中是如何封装axios的相关资料，axios的封装主要是帮助我们简化代码和利于后期的更新维护，感兴趣的小伙伴可以和小编一起来阅读下面文章的具体内容2021-10-10
vue的axios请求改变content-type为form-data问题
这篇文章主要介绍了vue的axios请求改变content-type为form-data问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
这篇文章主要介绍了element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最新评论