vue3 vite 配置代理解决跨域

最新推荐文章于 2025-03-21 16:44:23 发布
最新推荐文章于 2025-03-21 16:44:23 发布
阅读量3.7k 收藏 2
点赞数 2
分类专栏： ts vite vue3 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21115567/article/details/120548397
版权

在这里插入图片描述
server: {
proxy: {
‘/api’: {
target: ‘http://localhost:3003’,
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, ‘’),
},
},
},

Vue3配置vite.config.js代理解决跨域问题
共同学习，共同成长
08-13 2063
当浏览器发出一个请求时，只要请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同，就称为跨域。跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题,这篇文章主要给大家介绍了关于Vue3配置vite.config.js解决跨域问题的相关资料
随机掉落的项目足迹：Vue3中vite.config.ts配置代理服务器解决跨域问题
lbcbjtlhmjq的博客
10-08 1545
本博客涵盖：什么是跨域问题、产生跨域问题的原因（浏览器同源策略）、前端解决跨域问题的原理、配置代理服务器解决跨域问题的方法，以及整个过程中可能踩到的坑
vue用vite配置代理解决跨域问题（target、rewrite和changeOrigin的使用场景）
weixin_44161385的博客
06-04 4867
vue配置解决跨域
Vue3 + Vite 开发环境下解决跨域问题：配置代理服务器
宋冠巡的博客
09-30 9872
当前端要调用服务器端的 API 接口，而服务器端没有配置 `CORS (Cross-Origin Resource Sharing)` ，此时可能会使用代理服务器来解决跨域问题。在生产环境，可能会使用Nginx来作为代理服务器；在开发环境，Vue3中可以配置内置的HTTP服务器作为代理，将请求通过代理服务器发送到目标服务器，而浏览器只会看到来自代理服务器的响应，这就可以绕过同源策略的限制。
vite 打包之后在本地查看serve
最新发布
Hermia_yuan的博客
03-21 266
vite 打包之后在本地查看的几种方法
Vue3项目（由Vite构建）中通过代理解决跨域问题
聂可以的博客
05-20 8749
Vue3项目（由Vite构建）中通过代理解决跨域问题
Vue 3 + Vite 项目中配置代理解决开发环境中跨域请求问题
cuijiying的博客
02-23 1901
在 Vue 3 + Vite 项目中，配置代理是解决开发环境中跨域请求问题的常见方法。通过在 Vite 的配置文件中设置代理，可以将前端请求转发到后端服务器，从而避免浏览器的同源策略限制。
Vite跨域设置
第⑦个前端
08-02 1万+
vite / vue3跨域代理配置
Vue项目Vite配置代理解决跨域问题
青年码农
12-16 666
Vite — 一个Vue作者开发的Web开发工具，它具有快速的冷启动、及时的模块热更新、真正的按需加载。Vite基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。既然这么好，那就赶紧体验下。1.创建并运行Vue + Vite项目创建基于Vite的项目比较简单，这里就不多讲了...
vue+vite项目中跨域问题解决与跨域代理的两种方式原理详解
whs15193553607的博客
07-12 1690
（1） target参数：相当于是在代理地址（geoserver或者geoserverApi）前面拼接target代理后地址就是http://localhost:8080/geoserver或（2）changeOrigin参数：开启代理在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题；（3）rewrite参数：路径改写。
vue3+vite代理配置
yy869949908的博客
09-20 3944
前端项目上线前，运行在本地，无法跨域请求到服务器接口。
Vite配置Proxy代理解决跨域问题
热门推荐
~~~
05-29 2万+
vite配置proxy代理属于node中间件代理，简单来说，就是通过开启一个代理服务器，来充当一个中间层的角色，拦截前端发起的请求。代理服务器实际做的事：会在前端页面发起请求时，将请求**转发**到真实的后端服务器，然后响应给浏览器。利用服务器之间不存在同源策略限制的原理，整个过程通过代理服务器完成，浏览器是无感的，就会绕过浏览器的同源策略。
Vite配置跨域代理
catchmypow的博客
03-16 4116
Vite 配置跨域代理 修改vite.config.js文件 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { proxy: { '/api': { target: 'http://
vite 跨域配置
酷奇的博客
03-22 7321
跨域一般出现在开发阶段，由于线上环境前端代码被打包成了静态资源，因而不会出现跨域问题。跨域可以在前端通过 代理服务器实现，也可以通过后端配置请求头实现，具体情况具体选择。若线上环境跨域则只能通过后端配置请求头解决。
【vite 中如何配置跨域代理】
前端-CV全粘工程师
08-24 2044
下面是一个简单的示例，假设我们需要访问 http://example.com/api，但是该接口在开发环境中会出现跨域问题，这时可以通过配置代理，让接口请求转发到本地服务器进行处理。在 Vue.js 中使用 vite 搭建应用时，可以通过 vite.config.js 文件进行跨域代理的配置。在配置完成后，就可以在代码中直接访问。以上代码中，我们使用了。
Vue3基于vite脚手架---如何解决跨域问题（附带axios的进一步封装）
m0_67725787的博客
07-21 2074
【代码】Vue3基于vite脚手架---如何解决跨域问题（附带axios的进一步封装）
一篇搞懂基于Vite + Vue3项目前后端分别如何解决接口跨域问题
cuijiying的博客
01-20 2526
解决跨域问题的关键是在前端和后端之间通过配置代理或设置跨域允许的来源来实现。前端在开发环境下通过Vite配置代理，后端则通过中间件（Node.js使用cors，Java使用CORS配置类或注解）来允许特定来源的请求。前端：通过Vite配置开发环境代理，解决请求跨域。后端：使用中间件或配置类允许指定来源的请求。
vue3+vite接口跨域处理
lyna的博客
05-19 2095
出于浏览器的同源策略限制，当一个请求url的协议（https）、域名（www.xxx.com）、端口（8080）三者之间任意一个与当前页面url不同即为跨域。在vue3项目中，前端可以通过配置proxy来实现。在前后端分离的项目中，经常会出现跨域的问题。
vue3 vite解决跨域
m0_70060803的博客
07-05 5080
使用vite创建项目，配置代理跨域，需要在vite.config.js的文件中，去配置。这是配置跨域代理之后的vite.config.js的文件。然后通过axios去请求数据。这是使用vite搭建项目vite.config.js文件初始化的样子。下面通过server来配置。
vue3 vite配置代理
03-15
### Vue3 中使用 Vite 配置代理解决跨域问题 在 Vue3 项目中，如果遇到前后端分离导致的跨域问题，可以通过配置 `vite.config.js` 文件来设置反向代理。以下是详细的解决方案： #### 创建并编辑 `vite.config.js` 在项目的根目录下创建或编辑名为 `vite.config.js` 的文件，并按照以下方式配置代理选项。 ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], server: { host: '0.0.0.0', port: 9999, proxy: { '/api': { target: 'http://xxx.xxxxx.xxx/', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') // 移除路径前缀 /api } } } }); ``` 上述代码实现了以下几个功能： - 设置服务器监听地址为 `0.0.0.0` 和端口为 `9999`[^1]。 - 使用 `proxy` 属性定义了一个 `/api` 路径的代理规则，其中： - **`target`**: 将所有以 `/api` 开头的请求转发至目标地址 `http://xxx.xxxxx.xxx/`[^2]。 - **`changeOrigin`**: 修改请求头部中的 Origin 字段为目标地址，从而让后端认为该请求来自同一域名。 - **`rewrite`**: 对原始 URL 进行重写操作，去掉 `/api` 前缀后再发送给目标服务器。 #### 测试代理效果 启动开发环境时，可以尝试访问类似如下接口： ```plaintext GET http://localhost:9999/api/example-endpoint ``` 实际请求会被代理到： ```plaintext GET http://xxx.xxxxx.xxx/example-endpoint ``` 通过这种方式，解决了浏览器因同源策略而产生的跨域限制问题。 --- ### 注意事项 - 如果后端 API 地址发生变化，请及时更新 `target` 参数对应的值。 - 当部署生产版本时，默认情况下不会应用这些代理规则，因此需要确保线上环境中已正确配置 CORS 或其他机制支持跨域通信。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨顺518

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值