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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
微信小程序实现自定义底部导航
Nov 18 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中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python中字符串List按照长度排序
2019/07/01 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
2014两会优秀的心得体会范文
2014/03/17 职场文书
任命书模板
2014/06/04 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
何时使用Map来代替普通的JS对象
2021/04/29 Javascript