vue-cli开发环境实现跨域请求的方法
更新时间：2018年04月07日 15:43:37 作者：buppt
本篇文章主要介绍了vue-cli开发环境实现跨域请求的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端开发时，请求后台接口经常需要跨域，vue-cli实现跨域请求只需要打开config/index.js，修改如下内容即可。
//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
dev:{
proxyTable:{
'/api':{
target: 'http://172.3.2.1:8000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
这时在你想请求接口的url处，输入/api/look/1 即可实现跨域请求。
这时如果打开F12会发现请求的url是localhost:8080/api/look/1，这其实是虚拟从本地请求数据，这样就不会有跨域的问题产生了。
一般情况下上面的方法是没有问题的，要是上面的方法行不通，可以试试这样写：
//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
dev:{
proxyTable:{
'/look':{
target: 'http://172.3.2.1:8000',
changeOrigin: true,
pathRewrite: {
'^/look': '/look'
}
}
}
}
}
这时在你想请求接口的url处，输入/look/1 即可实现跨域请求。
详情：https://vuejs-templates.github.io/webpack/proxy.html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue监听滚动事件的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要给大家介绍了关于vue前端和Django后端如何查询一定时间段内的数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
这篇文章主要介绍了vue3使用mqtt的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
这篇文章主要为大家介绍了vue3调度器effect的scheduler功能实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了vue使用WebSocket模拟实现聊天功能,通过创建node服务和server.js文件实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下2021-08-08
element-ui中el-upload多文件一次性上传的实现
这篇文章主要介绍了element-ui中el-upload多文件一次性上传的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要为大家详细介绍了vue车牌输入组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
本文主要介绍了常见路由跳转的几种方式，主要介绍了四种常见方式，具有一定的参考价值，感兴趣的可以了解一下2023-09-09
Redux、Vuex 和 Pinia 都是用于状态管理的流行框架,这篇文章主要介绍了前端数据存储常用工具Vuex、Pinia、Redux的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
electron-vue 运行报错 Object.fromEntries is not a function
Object.fromEntries() 是 ECMAScript 2019 新增的一个静态方法，用于将键值对列表（如数组）转换为对象，如果在当前环境中不支持该方法，可以使用 polyfill 来提供类似功能，接下来通过本文介绍electron-vue 运行报错 Object.fromEntries is not a function的解决方案2023-05-05
最新评论