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动态调整iframe高度的方法
Mar 06 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 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重新实现PHP脚本引擎内置函数
2007/03/06 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python_LDA实现方法详解
2017/10/25 Python
linux安装python修改默认python版本方法
2019/03/31 Python
利用Python检测URL状态
2019/07/31 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
《中华少年》教学反思
2014/02/15 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
狮子林导游词
2015/02/03 职场文书
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python