详解Vue-cli 创建的项目如何跨域请求
更新时间：2017年05月18日 09:09:04 作者：WiseWrong
本篇文章主要介绍了详解Vue-cli 创建的项目如何跨域请求 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
问题描述：
使用 Vue-cli 创建的项目，开发地址是 localhost:8023，需要访问 localhost:9000 上的接口
分析原因：
不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置
不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，实现跨域请求
解决方案：
接口地址原本为 /form/save，但是为了匹配代理地址，在前面加一个 /api
如果使用了 axios，可以全局配置一个 baseURL，这样就不用挨个儿修改 url 了
axios.defaults.baseURL = '/api'
在 config>index.js 的 dev 中添加配置项 proxyTable：
proxyTable: {
'/api': {
target: 'http://127.0.0.1:9000/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
其中 '/api' 为匹配项，target 为被请求的地址
因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的
所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'
如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了解决vue无法设置滚动位置的问题 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了Vue使用预渲染代替SSR的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
本篇文章主要介绍了vue addRoutes实现动态权限路由菜单的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了详解如何创建并发布一个vue组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家介绍了html中引入Vue.js的cdn实现简单的文档单页示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家介绍了vue子组件设计provide和inject理解及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家介绍了vue3 reactive数据更新视图不更新问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本篇文章主要介绍了vue事件修饰符和按键修饰符用法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
在项目开发中,有两个功能特别类似,如果单独实现,会有很多重复的代码，这时候就会用到逻辑复用，本文主要介绍了vue3 逻辑复用的实现示例，具有一定的参考价值，感兴趣的可以了解一下2024-02-02
本文主要介绍了Vue和SpringBoot之间传递时间的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论