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的面向对象方法以及差别
Mar 31 Javascript
jQuery Selector选择器小结
May 06 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
webpack开发环境和生产环境的深入理解
Nov 08 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 批量更新网页内容实现代码
2010/01/05 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
js实现漫天星星效果
2017/01/19 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
Python常用列表数据结构小结
2014/08/06 Python
实例Python处理XML文件的方法
2015/08/31 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python实现移位加密和解密
2019/03/22 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
求高于平均分的学生学号及成绩
2016/09/01 面试题
生物专业个人自荐信范文
2013/11/29 职场文书
记者岗位职责
2014/01/06 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
费城故事观后感
2015/06/10 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Java实现房屋出租系统详解
2021/10/05 Java/Android
MySQL如何使备份得数据保持一致
2022/05/02 MySQL