vue使用代理解决请求跨域问题详解


Posted in Javascript onJuly 24, 2019

在日常开发中,我们前端必不可少的需要像后端请求数据。

但是一般前后端分离,所以域名、端口等肯定不尽相同,这样就不可避免的会遇到浏览器的同源策略限制。

在一般情况下,后端都会设置请求跨域允许的来源、方法等。

但是也保不准后端疏忽而忘记这个问题。

那为了不影响我们的开发,前端只能被动的去找后端解决跨域问题。

其实,我们前端也可以解决跨域问题,那就是使用代理。

举个例子:

我请求的地址是这个:http://192.168.12.36:9000/api/SourceManager

但是我本地的vue项目的端口号是8080,这里就涉及到了端口号不一致导致的同源策略问题(别想着改成同端口,会冲突)、

那么我发起请求就会跨域而被浏览器拦截,那么我们来看看解决办法:

在vue的config文件夹中有个index.js文件:

在proxyTable中配置代理(名字可以随便起,我用的是web)

proxyTable: {
  '/web': {
    //设置你调用的接口域名和端口号 别忘了加http
    target: 'http://192.168.12.36:9000/api/SourceManage',
    changeOrigin: true,
    pathRewrite: {
      '^/web': ''
      //这里理解成用‘/web'代替target里面的地址,后面组件中我们掉接口时直接用web代替 比如我要调用'http://192.168.12.36:9000/api/SourceManage/user/add',直接写‘/web/user/add'即可
    }
  }
}

因为我是把公共的请求地址抽离出来的,所以大家可以参考以下部分:

获取数据:http://192.168.12.36:9000/api/SourceManager/GetAll

增加数据:http://192.168.12.36:9000/api/SourceManager/AddSource

修改数据:http://192.168.12.36:9000/api/SourceManager/UpdateSource

删除数据:http://192.168.12.36:9000/api/SourceManager/DeleteSource

理论上代理中配置到端口号即可,但是我为了后期方便,把公共地址抽离出来,一直配置到公共的结束,所以代理中我配置的是http://192.168.12.36:9000/api/SourceManager

然后在config文件夹中的dev.env.js文件中配置生产环境(开发环境):

这边写自己的路径端口号以及前面配置的代理名:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: ' "http://localhost:8080/web" '
})

然后在config文件夹中的prod.env.js文件中配置产品环境(上线环境):

这边我暂时就不写了,大家上线打包的时候写成自己的实际请求地址即可。

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: ' "" '
}

然后在main.js里改为请求配置的地址:

// 引入axios
import axios from 'axios'
 
// 使用axios
Vue.prototype.axios = axios;
 
// 配置公共请求地址
Vue.prototype.baseURL = process.env.API_ROOT;

然后在每个页面请求即可,写法参考:

因为之前一直配置的是公共地址,所以这里只写后面变化的,前面的引用设置的路径即可。

this.axios({
  method: "get",
  url:`${this.baseURL}/GetAll`, 
})
.then((response)=> {
  console.log(response)
})
.catch((error)=> {
  console.log(error);
});

设置完代理别忘了重启服务器。

好了,以上就是vue中配置代理解决跨域的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 #Javascript
mock.js模拟数据实现前后端分离
Jul 24 #Javascript
vue+mock.js实现前后端分离
Jul 24 #Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 #Javascript
Vue封装的组件全局注册并引用
Jul 24 #Javascript
vue子路由跳转实现tab选项卡
Jul 24 #Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 #Javascript
You might like
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
js省市区级联查询(插件版&无插件版)
2017/03/21 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
浅谈Python中的闭包
2015/07/08 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
QML用PathView实现轮播图
2020/06/03 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
香港交友网站:be2香港
2018/07/22 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
入党积极分子党小组意见
2015/06/02 职场文书
小人国观后感
2015/06/11 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB