vue-cli3跨域配置的简单方法


Posted in Javascript onSeptember 06, 2019

vue-cli3跨域配置:

在vue-resource的数据请求中,一般我们会将请求方式GET/POST修改为jsonp的请求方式就可以实现跨域。

但是对于只支持GET/POST两种请求方式的api,修改jsonp,就会出错。需要进行跨域的配置。

(1)在文件根目录下,创建vue.config.js配置文件,具体配置如下:

module.exports={

//将baseUrl:'/api',改为baseUrl:'/'
baseUrl:'/',
devServer:{
  '/api':{
    target:'http://apis.juhe.cn/',
    changeOrigin:true,
    ws:true,
    pathRewrite:{
      '^/api':'' 
    }
     
  }
}}

(2)在文件根目录下,创建.env.development 用作开发环境变量设置。

在.env.development文件下设置变量 VUE_APP_BASE_API=/api 即可将devServer的proxy重写的url赋值给VUE_APP_BASE_API

(3)读取配置的变量,通过process.env.VUE_APP_XX(process.env.VUE_APP_BASE_API)来读取。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 #Javascript
对layui中的onevent 和event的使用详解
Sep 06 #Javascript
在layui下对元素进行事件绑定的实例
Sep 06 #Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 #Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 #Javascript
使用layui的router来进行传参的实现方法
Sep 06 #Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 #Javascript
You might like
如何做到多笔资料的同步
2006/10/09 PHP
YII实现分页的方法
2014/07/09 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
php和nginx交互实例讲解
2019/09/24 PHP
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
Python实现list反转实例汇总
2014/11/11 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python实现名片管理系统项目
2019/04/26 Python
Python中psutil的介绍与用法
2019/05/02 Python
python常用排序算法的实现代码
2019/11/08 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
python 调整图片亮度的示例
2020/12/03 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
一些Solaris面试题
2013/03/22 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
军训自我鉴定
2013/12/14 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
宣传口号大全
2014/06/16 职场文书
简易版租房协议书范本
2014/10/13 职场文书
2014年客房部工作总结
2014/11/22 职场文书
北京颐和园导游词
2015/01/30 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书