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代理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解VUE中的插值( Interpolation)语法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
这篇文章主要介绍了用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果,代码简单易懂，非常不错，具有一定的参考借鉴价值需要的朋友可以参考下2019-08-08
这篇文章主要介绍了Vue 计算属性 computed，一般情况下属性都是放到data中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性，下面我们来看看具体实例,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了vue 表格单选按钮的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
今天小编就为大家分享一篇vue 实现v-for循环回来的数据动态绑定id，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
customRef()是Vue3的高级工具,允许开发者创建具有复杂依赖跟踪和自定义更新逻辑的ref对象,本文详细介绍了customRef()的使用场景、基本用法、功能详解以及最佳实践,包括防抖、异步更新等用例,旨在帮助开发者更好地理解和使用这一强大功能2024-09-09
今天小编就为大家分享一篇swiper在vue项目中loop循环轮播失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue路由打开一个新的窗口的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
vue前端实现dhtmlxgantt甘特图代码示例(个人需求)
这篇文章主要介绍了如何使用dhtmlx-gantt和chinese-days插件在项目中实现节假日置灰显示的功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-03-03
Vue.js 如何添加全局常量或变量? 这是最近一个同事问的问题，发现很多朋友对这块不熟悉，所以下面这篇文章主要给大家介绍了关于Vue中定义全局变量与常量的各种方式，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
最新评论