vue3.0 proxy设置代理不成功的问题及解决方案
更新时间：2023年12月07日 15:38:18 作者：悠悠~飘
这篇文章主要介绍了vue3.0 proxy设置代理不成功的问题及解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
一.设置proxy
首先在项目中创建vue.config.js
注意在ts环境下仍为js结尾
项目配置详情如下：
module.exports ={
devServer: {
open: false, // 是否自动弹出浏览器页面
proxy: {
'/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
target: "http://localhost:3000", //目标地址，一般是指后台服务器地址
changeOrigin: true, // 是否跨域
ws: true, // 是否代理 websockets
secure: false, // 是否https接口
// pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替 如果有则不需要此属性
// '^/api': "/api"
// }
}
}
}
}二.问题出现
结果运行依然报错
三.解决方案
最后还是出现在axios的默认基本路径的配置和代理发生了冲突，代理本身是将请求基本路径代理到目标基本路径
比如:
项目基本路径是http:localhost:8080
axios 基本路径却设置为http:localhost:3000,
代理目标路径为：http:localhost:3000
此时项目启动仍然报错跨域
所以axios的基本路径要么设置为项目启动路径http:localhost:8080要么设置为空
此时问题解决
到此这篇关于vue3.0 proxy设置代理不成功的文章就介绍到这了,更多相关vue3.0 proxy代理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
我们在日常的工作中肯定会遇到项目打包优化等问题,本文主要介绍了vite打包优化CDN压缩的分析实现,具有一定的参加价值,感兴趣的可以了解一下2024-07-07
Flutter部件内部状态管理小结之实现Vue的v-model功能
本文是 Flutter 部件内部状态管理的小结，从部件的基础开始，到部件的状态管理，并且在过程中实现一个类似 Vue 的 v-model 的功能，感兴趣的朋友跟随小编一起看看吧2019-06-06
axios中post请求json和application/x-www-form-urlencoded详解
Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用,下面这篇文章主要给大家介绍了关于axios中post请求json和application/x-www-form-urlencoded的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要给大家介绍了关于vue中如何使用echarts动态渲染数据的相关资料,echarts是一款基于JavaScript的开源可视化图表库,它通过简单的配置即可实现各种各样的可视化效果,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue之bus总线的简单使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要给大家介绍了关于vue中el-tree动态初始默认选中和全选实现的相关资料,eltree默认选中eltree是一种常用的树形控件,通常用于在网页上呈现树形结构的数据,例如文件夹、目录、组织结构等,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue路由之JWT身份认证的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了如何使用Vue3实现列表无限滚动的效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2023-07-07
这篇文章主要为大家详细介绍了Vue3如何通过纯前端方案将富文本内容直接导出为符合中文排版规范的 Word 文档,有需要的小伙伴可以参考下2025-03-03
同时Vue也支持让开发者,自己注册一些指令,这些指令被称为自定义指令,每个指令都有自己各自独立的功能,这篇文章主要介绍了Vue自定义指令简介和基本使用,需要的朋友可以参考2024-03-03
最新评论