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

已于 2024-09-01 16:27:35 修改
阅读量302 收藏 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

了解本专栏 订阅专栏 解锁全文 超级会员免费看
码喽的自我修养
关注
专栏目录
订阅专栏
如何在vite.config.js上配置跨域代理？
油炸瓜皮的博客
06-05 472
vue.config.js和vite.config.js写法不同。在vite.config.js的export中添加如下代码。
Vue3.0+vite vite.config.ts配置与env
qq_42396791的博客
03-15 1310
【代码】Vue3.0 vite.config.ts配置。
vue3+vite项目跨域配置（踩坑无数篇）
weixin_52084329的博客
10-25 5929
写这篇多少有点心情复杂，毕竟因为一个巨巨巨巨没意思的bug卡了两整天…废话不多说啦，开篇入题叭，希望大家都能改好自己的bugggggg！！！
Vue3 配置 vite.config.js 解决跨域问题
一名全栈小白的博客
03-04 2649
Vue3 配置 vite.config.js 解决跨域问题
Vue3 vite.config.js配置跨域
04-08 2517
已知有个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 跨域
lryh_的博客
06-26 509
即使在开发环境中使用代理解决了跨域问题，在生产环境中部署时，后端服务器仍需支持 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 3 在 vue.config.js配置代理 解决前端跨域问题
m0_46701899的博客
10-12 596
module.exports = { // 是否开启cssSourceMap productionSourceMap: true, //build输出目录 outputDir:"client_pc", //静态资源目录（js, css, img） assetsDir:"static", filenameHashing:false, // 设置打包文件路径 publicPath: process.env.NODE_ENV === 'pr...
vue3项目之axios封装以及vue.config.js 代理proxy配置
sinat_38628334的博客
12-09 5728
前后端分离项目基本都要解决跨域，除了后端设置外，前端通常通过代理解决跨域。由于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 "
vue配置代理vue.config.js后不生效（小坑）
m0_67392182的博客
03-09 4828
我的项目使用vue-cli4脚手架搭建的，想要修改webpack配置，需要手动在根目录下面添加一个vue.config.js文件，会自动识别该文件。附上我的配置： // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分，具体配置参考文档 module.exports = { // 部署生产环境和开发环境下的URL。 // 默认情况下，V
vue3+vite 配置反向代理和跨域 设置端口号
weixin_45547638的博客
10-19 3518
在vite.config.ts 文件中直接配置。
在vite.config.js文件中配置代理解决跨域
最新发布
徐同保的专栏
06-27 912
在vite.config.js文件中配置代理解决跨域
Vue——vue3中vite配置跨域请求
qq_43201350的博客
10-09 1010
Vue——vue3中vite配置跨域请求
Vue3项目（由Vite构建）中通过代理解决跨域问题
聂可以的博客
05-20 6701
Vue3项目（由Vite构建）中通过代理解决跨域问题
vue3 vite.config.js 解决跨域问题
qq_36164225的博客
09-07 1609
【代码】vue3 vite.config.js 解决跨域问题。
vue3+vite接口跨域处理
lyna的博客
05-19 1946
出于浏览器的同源策略限制，当一个请求url的协议（https）、域名（www.xxx.com）、端口（8080）三者之间任意一个与当前页面url不同即为跨域。在vue3项目中，前端可以通过配置proxy来实现。在前后端分离的项目中，经常会出现跨域的问题。
vue3 解决跨域问题
qq_51541555的博客
12-14 791
vite默认不加载.env文件，可以使用loadEnv来加载。vite中的环境变量必须以VITE_开头才能被识别。
vue3+vite 在vite.config.js本地代理
06-15
Vue 3 和 Vite 是现代前端开发中的热门组合，Vite 是一个由尤雨溪（Vite的开发者）创建的高性能前端构建工具，它提供了快速的热更新和预构建能力。在使用 Vite 构建 Vue 项目时，你可能会遇到需要在 `vite.config.js` 文件中配置本地代理的情况，以便访问在开发环境下运行的 API 或静态资源。 在 `vite.config.js` 中，你可以使用 `define` 函数定义一个名为 `proxy` 的对象，这个对象的键是你希望访问的服务路径，值是一个配置对象。以下是一个基本的配置示例： ```javascript export default defineConfig({ // ...其他配置 // 本地代理配置 proxy: { '/api': { target: 'http://localhost:8080', // 你要代理的目标服务器地址 changeOrigin: true, // 允许跨域请求 pathRewrite: { '^/api' : '' } // 将请求的路径前缀 '/api' 替换为空字符串 } } }); ``` 在这个例子中： - `/api` 是你在前端应用中想访问的路径，例如 `/api/data`。 - `target` 指定了代理请求发送到的服务器地址。 - `changeOrigin` 设置为 `true`，意味着 Vite 会在发送请求时自动添加 `Origin` 头，处理跨域问题。 - `pathRewrite` 部分用于重写路径，这里将所有以 `/api` 开始的路径映射到目标服务器的根路径。 如果你有多个代理规则，可以在 `proxy` 对象中添加更多条目，每个条目对应不同的服务或路径。 相关问题： 1. Vite 的代理功能是如何实现的？ 2. 当我们在生产环境中部署时，是否还需要设置这样的代理配置？ 3. 如何在 Vite 中处理动态生成的代理路径？
评论 40
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

码喽的自我修养

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

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

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

打赏作者

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

抵扣说明：

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

余额充值