vue跨域接口转发

最新推荐文章于 2023-05-23 16:39:17 发布

super美少女战士

最新推荐文章于 2023-05-23 16:39:17 发布

阅读量779

点赞数

分类专栏： vue element ui 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/X_W123/article/details/121688769

版权

vue 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

element ui

6 篇文章 0 订阅

订阅专栏

本文介绍了在Vue CLI3.0中如何配置devServer的proxy选项实现跨域请求，通过设置target、ws、secure、changeOrigin等参数详细解释了接口转发的原理。同时，讲解了pathRewrite如何将请求路径进行重写，以便适应不同的接口前缀需求，从而确保前端应用能够顺利调用后台API。

摘要由CSDN通过智能技术生成

记录下关于跨域，接口转发的理解
//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
proxy: {
‘/rng’: { //这里最好有一个 /
target: ‘http://45.105.124.130:8081’, // 后台接口域名
ws: true, //如果要代理 websockets，配置这个参数
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{
‘^/rng’:’’
}
}
}
}

我的 api=’/rng’
我的请求地址 ${api}/xxxx/xxx ，请求地址就为 ‘/rng/xxxx/xxx’
当node服务器遇到以 ‘/rng’ 开头的请求，就会把 target 字段加上，那么我的请求地址就为 http://45.105.124.130:8081/rng/xxxx/xxx
下面的 pathRewrite 表示的意思是把/rng 替换为空，那么我的请求地址就为 http://45.105.124.130:8081/xxxx/xxx（用在如果你的实际请求地址没有 rng 的情况）
如果/rng，等于preapi，则最后的地址为：http://45.105.124.130:8081/preapi/xxxx/xxx