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控制代码暂停的实现方法分享
Oct 11 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
详解vue-cli中使用rem,vue自适应
May 06 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
js实现随机点名器精简版
Jun 29 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
第七节--类的静态成员
2006/11/16 PHP
php 操作调试的方法
2012/07/12 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python 调用c语言函数的方法
2017/09/29 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
优秀班主任事迹材料
2014/12/16 职场文书
五一劳动节慰问信
2015/02/14 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技