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 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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字符串过滤与替换小结
2015/01/26 PHP
PHP积分兑换接口实例
2015/02/09 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
XML的代替者----JSON
2007/07/21 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
Python爬取三国演义的实现方法
2016/09/12 Python
python模块之paramiko实例代码
2018/01/31 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
简单了解Django ContentType内置组件
2019/07/23 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
房地产销售大学生自我评价分享
2013/11/11 职场文书
企业标语大全
2014/07/01 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
西双版纳导游词
2015/02/03 职场文书