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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
表单(FORM)的一些实用效果代码
Mar 25 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
Javascript学习笔记5 类和对象
Jan 11 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
深入分析javascript中console命令
Aug 14 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 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导出word格式数据的代码实例
2013/11/25 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
读jQuery之三(构建选择器)
2011/06/11 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
js实现打字小游戏
2019/12/17 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python常见的格式化输出小结
2016/12/15 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
浅谈python之新式类
2018/08/12 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
个人委托书范本
2014/04/02 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
机械生产实习心得体会
2016/01/22 职场文书