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 相关文章推荐
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
vue-router的两种模式的区别
May 30 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
用PHP 4.2书写安全的脚本
2006/10/09 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Python中几种导入模块的方式总结
2017/04/27 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
python要安装在哪个盘
2020/06/15 Python
python中取绝对值简单方法总结
2020/07/24 Python
python3代码中实现加法重载的实例
2020/12/03 Python
女性时尚在线:IVRose
2019/02/23 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
教师的实习自我鉴定
2013/12/17 职场文书
暑期研修感言
2014/02/17 职场文书
副总经理任命书
2014/06/05 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
nginx之内存池的实现
2022/06/28 Servers