详解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 相关文章推荐
JavaScript全局函数使用简单说明
Mar 11 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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字符串word末字符实现大小写互换的方法
2014/11/10 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Django models.py应用实现过程详解
2019/07/29 Python
python3.5的包存放的具体路径
2020/08/16 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
会计毕业生自荐书
2014/06/12 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
企业党员个人自我评价
2014/09/20 职场文书
优秀团支部申报材料
2014/12/26 职场文书
欢送会主持词
2015/07/01 职场文书
生产设备维护保养制度
2015/08/06 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
7个关于Python的经典基础案例
2021/11/07 Python