Vue3配置vite.config.js代理解决跨域问题

已于 2024-09-01 16:27:35 修改
阅读量707 收藏 25
点赞数 23
分类专栏： vue2/3 从基础到起飞 前端工程搭建 文章标签： javascript 开发语言 ecmascript vue.js 前端 nginx
于 2024-08-13 12:18:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78542842/article/details/141159272
版权

前言：

当浏览器发出一个请求时，只要请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同，就称为跨域。

跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题,这篇文章主要给大家介绍了关于Vue3配置vite.config.js解决跨域问题的相关资料,创作不易，如果能帮助到带大家，欢迎收藏+关注 哦 💕

问题再现

后台报错：Access to XMLHttpRequest at ‘http://localhost:8080/user/register’ from origin ‘http://localhost:5173’ has been blocked by

了解本专栏 订阅专栏 解锁全文 超级会员免费看
码喽的自我修养
关注
专栏目录
订阅专栏
vue3+vite项目跨域配置（踩坑无数篇）
weixin_52084329的博客
10-25 6401
写这篇多少有点心情复杂，毕竟因为一个巨巨巨巨没意思的bug卡了两整天…废话不多说啦，开篇入题叭，希望大家都能改好自己的bugggggg！！！
Vue3 vite.config.js配置跨域
04-08 2612
已知有个api地址 后端地址是http://localhost:5000/api/getList。例如：http://localhost:5000，https://192.168.1.10:5000 协议+域名+端口号。程序就自动把/api 替换为http://localhost:5000/api/前端的vue程序 运行地址是http://localhost:3000。2、前台的地址也可以配置 http://localhost:3000。
Vue3基于vite脚手架---如何解决跨域问题（附带axios的进一步封装）
m0_67725787的博客
07-21 1673
【代码】Vue3基于vite脚手架---如何解决跨域问题（附带axios的进一步封装）
Vue3 + Vite 开发环境下解决跨域问题：配置代理服务器
宋冠巡的博客
09-30 3385
当前端要调用服务器端的 API 接口，而服务器端没有配置 `CORS (Cross-Origin Resource Sharing)` ，此时可能会使用代理服务器来解决跨域问题。在生产环境，可能会使用Nginx来作为代理服务器；在开发环境，Vue3中可以配置内置的HTTP服务器作为代理，将请求通过代理服务器发送到目标服务器，而浏览器只会看到来自代理服务器的响应，这就可以绕过同源策略的限制。
这是一份保姆级Vue3+Vite实战教程
热门推荐
很多时候犯错都是在不知情的情况下发生的
02-12 1万+
ESLint 不仅能够检测代码中的错误，而且在许多情况下，可以为我们自动纠正错误。如上，这是我电脑 nrm 管理的镜像源列表，最后一个是我公司内网的所以打码了，除了最后一个都是安装 nrm 自带的，你可以使用 nrm use 命令很方便的去切换源，npm 默认就是列表中名为 npm 的源，如果你下载不下来一些工具，可以切换为 taobao 源，当然安装完成后最好切回来，因为除了 npm 源，其他源在下载某些包时，都可能会出现一些莫名的问题。
VUE3+Vite，解决跨越
family20102010的博客
01-14 1373
监控网络，发现URL竟然是：http://localhost:38080/api/axios，并不是http://localhost:38081/axios，但是实际确实访问了服务器http://localhost:38081/axios。vue中使用axios发起get请求部分的代码如下，其中服务器的URL是：“http://localhost:38081/axios”2.修改get请求部分的URL，这里的“/api”等效于’http://localhost:38081’好了，跨域问题解决了。
【vuejs开发】如何在vue里面优雅的解决跨域，路由冲突问题！超详细
weixin_33804582的博客
10-25 562
原创文章，作者：stark，如若转载，请注明出处：https://shudong.wang/10233.html 如何在vue里面优雅的解决跨域，路由冲突问题 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: { '/goods/*': { target...
Vue3 配置 vite.config.js 解决跨域问题
一名全栈小白的博客
03-04 3240
Vue3 配置 vite.config.js 解决跨域问题
vue3 vite 跨域
lryh_的博客
06-26 630
即使在开发环境中使用代理解决了跨域问题，在生产环境中部署时，后端服务器仍需支持 CORS。确保服务器的响应头包含适当的 CORS 配置。进行请求，Vite 开发服务器会自动将请求代理到目标服务器。// 代理所有 /api 开头的请求到目标服务器。在你的 Vue 组件或其他前端代码中，通过。在项目根目录下创建或编辑。
vue3+vite在vite中配置跨域
weixin_57011137的博客
10-29 1万+
在vite.config.js中配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], base: "./",//打包路径 resolve: { alias: { '@': p
Vue——vue3中vite配置跨域请求
qq_43201350的博客
10-09 1038
Vue——vue3中vite配置跨域请求
随机掉落的项目足迹：Vue3中vite.config.ts配置代理服务器解决跨域问题
最新发布
lbcbjtlhmjq的博客
10-08 1269
本博客涵盖：什么是跨域问题、产生跨域问题的原因（浏览器同源策略）、前端解决跨域问题的原理、配置代理服务器解决跨域问题的方法，以及整个过程中可能踩到的坑
Vue3.0+vite vite.config.ts配置与env
qq_42396791的博客
03-15 1746
【代码】Vue3.0 vite.config.ts配置。
vue2.x跨域处理（vue.config.js不起作用）
Q_Q104926的博客
03-09 3316
vue2.x跨域处理（proxy请求转发） 问题 刚刚入门vue，想实现vue页面请求后端验证码图片和登录功能。作为小白的我需要不断的摸索前进。 后端提供，前端发送请求，似乎很简单的一个请求就可以解决，我刚开始也是这么想滴，但是，写完发现有草率了。我前端的端口是8088，服务端的端口是2020，F12查看，发现获取验证码的请求怎么都发送在前端，故而页面显示空白。 度娘发现需要在前端做一个代理转发，那就按照度娘的结果一步步来吧。 这里已经安装axios。 ① 建立一个vue.config.js 文件，
vue3项目之axios封装以及vue.config.js 代理proxy配置
sinat_38628334的博客
12-09 5839
前后端分离项目基本都要解决跨域，除了后端设置外，前端通常通过代理解决跨域。由于vue-cli3创建的项目不会自动生成vue.config.js文件，需要手动创建在根目录下进行相关配置。 准备： 前端地址：http://10.13.123.123:8888 后端接口地址示例：http://10.13.456.456:9999/test/login/doLogin 封装axios： //src>request>http.js //main.ts引用：import http from "
Vue3项目（由Vite构建）中通过代理解决跨域问题
聂可以的博客
05-20 7403
Vue3项目（由Vite构建）中通过代理解决跨域问题
在vite.config.js文件中配置代理解决跨域
徐同保的专栏
06-27 1156
在vite.config.js文件中配置代理解决跨域
vue3+vite接口跨域处理
lyna的博客
05-19 1989
出于浏览器的同源策略限制，当一个请求url的协议（https）、域名（www.xxx.com）、端口（8080）三者之间任意一个与当前页面url不同即为跨域。在vue3项目中，前端可以通过配置proxy来实现。在前后端分离的项目中，经常会出现跨域的问题。
vue3 vite.config.js 解决跨域问题
qq_36164225的博客
09-07 1636
【代码】vue3 vite.config.js 解决跨域问题。
vue3+vite 在vite.config.js本地代理
06-15
在使用 Vite 构建 Vue 项目时，你可能会遇到需要在 `vite.config.js` 文件中配置本地代理的情况，以便访问在开发环境下运行的 API 或静态资源。 在 `vite.config.js` 中，你可以使用 `define` 函数定义一个名为 `...
评论 40
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

码喽的自我修养

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

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

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

打赏作者

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

抵扣说明：

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

余额充值