详解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 相关文章推荐
AngularJS语法详解(续)
Jan 23 Javascript
javascript实现完美拖拽效果
May 06 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
layui的table中显示图片方法
Aug 17 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
vue实现计算器功能
Feb 22 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
JavaScript实现横版菜单栏
Mar 17 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
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
jQuery each()小议
2010/03/18 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python模块之paramiko实例代码
2018/01/31 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
创建文明城市标语
2014/06/16 职场文书
求职信的正确写法
2014/07/10 职场文书
上课不认真检讨书
2014/09/17 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
甲午大海战观后感
2015/06/02 职场文书
孙振耀退休感言
2015/08/01 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
Mysql中常用的join连接方式
2022/05/11 MySQL