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 相关文章推荐
JSON辅助格式化处理方法
Mar 26 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
vue点击当前路由高亮小案例
Sep 26 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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 curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
js function定义函数使用心得
2010/04/15 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
tornado+celery的简单使用详解
2019/12/21 Python
python入门之井字棋小游戏
2020/03/05 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
Python request中文乱码问题解决方案
2020/09/17 Python
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
支教自我鉴定
2014/01/18 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
公司经理任命书
2014/06/05 职场文书
员工生日会策划方案
2014/06/14 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书