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实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
微信小程序选择图片控件
Jan 19 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自动跳转中英文页面
2008/07/29 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Python collections模块实例讲解
2014/04/07 Python
Python模拟登录12306的方法
2014/12/30 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
理工大学毕业生自荐信范文
2014/02/22 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
安全生产月活动总结
2014/05/04 职场文书
党员公开承诺书内容
2014/05/20 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
公司停电通知
2015/04/15 职场文书
入党介绍人考察意见
2015/06/01 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python