详解Vue-cli 创建的项目如何跨域请求


Posted in Javascript onMay 18, 2017

问题描述:

使用 Vue-cli 创建的项目,开发地址是 localhost:8023,需要访问 localhost:9000 上的接口

分析原因:

不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置

不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,实现跨域请求

 解决方案:

接口地址原本为 /form/save,但是为了匹配代理地址,在前面加一个 /api

详解Vue-cli 创建的项目如何跨域请求

 如果使用了 axios,可以全局配置一个 baseURL,这样就不用挨个儿修改 url 了

axios.defaults.baseURL = '/api'

在 config>index.js 的 dev 中添加配置项 proxyTable:

详解Vue-cli 创建的项目如何跨域请求

proxyTable: {
   '/api': {
    target: 'http://127.0.0.1:9000/',
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'
    }
   }
  },

其中 '/api' 为匹配项,target 为被请求的地址

因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的

所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'

如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
理解javascript对象继承
Apr 17 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 #Javascript
BootStrap 导航条实例代码
May 18 #Javascript
AngularJS全局警告框实现方法示例
May 18 #Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 #Javascript
原生js轮播特效
May 18 #Javascript
js实现放大镜特效
May 18 #Javascript
vue v-on监听事件详解
May 17 #Javascript
You might like
德生PL990的分析评价
2021/03/02 无线电
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
python生成圆形图片的方法
2020/03/25 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
构建高效的python requests长连接池详解
2020/05/02 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
十八大报告观后感
2014/01/28 职场文书
个人收入证明范本
2014/09/18 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
中秋节慰问信
2015/02/15 职场文书
个人年终总结开头
2015/03/06 职场文书
如何写辞职信
2015/05/13 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
社区宣传标语口号
2015/12/26 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL