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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
node.js中watch机制详解
Nov 17 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 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分页示例代码
2007/03/19 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
php实现等比例压缩图片
2018/07/26 PHP
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
C# .NET面试题
2015/11/28 面试题
市优秀教师事迹材料
2014/02/05 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
Golang日志包的使用
2022/04/20 Golang