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 节点遍历函数
Mar 28 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 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
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
jquery基础教程之数组使用详解
2014/03/10 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
Python制作数据导入导出工具
2015/07/31 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
外贸专业求职信
2014/03/09 职场文书
三项教育活动实施方案
2014/03/30 职场文书
婚育证明样本
2015/06/16 职场文书
小学运动会入场词
2015/07/18 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL