Vue proxyTable配置多个接口地址,解决跨域的问题


Posted in Javascript onSeptember 11, 2020

最开始的时候,因为请求后台出现跨域问题。

查找资料配置proxyTable,解决跨域问题。如下图所示:

Vue proxyTable配置多个接口地址,解决跨域的问题

axios请求页面:

this.$axios.post('/api/weblogin/login',data).then(res=>{
    console.log(res)
})

后面遇到需要连接不同的接口域名,我在proxyTable里增加了一个apiGas。axios请求存在获取得到api但是不能获取apiGas(提示请求资源不存在)。

proxyTable: {
   '/api': {
    target: 'http://', // 接口域名
    changeOrigin: true, //是否跨域
    pathRewrite: {
     '^/api': '/bsgzf/api/auth/' , //需要rewrite的,
    },
   },
   '/apiGas': {
    target: 'http://', // 接口域名
    changeOrigin: true, //是否跨域
    pathRewrite: {
     '^/apiGas':'/bsgzf/api/gas/'
    }
   },  
  },

查找了很多资料都没有具体的解决方法,偶然在一个相同的问题下发现一个回复,让把这两个链接位置换一下,抱着试一试的态度换了,重新运行,结果两个都可以获取了。不知道什么原理???有知道的请指教!!!

正解:

proxyTable: {
   '/apiGas': {
    target: 'http://', // 接口域名
    changeOrigin: true, //是否跨域
    pathRewrite: {
     '^/apiGas':'/bsgzf/api/gas/'
    }
   }, 
   '/api': {
    target: 'http://', // 接口域名
    changeOrigin: true, //是否跨域
    pathRewrite: {
     '^/api': '/bsgzf/api/auth/' , //需要rewrite的,
    },
   }, 
  },

补充知识:Vue里的proxyTable解决跨域,api接口管理

本文单纯的介绍Vue项目中接口的集中管理以及跨域的解决方法。

1.webpack里的proxyTable设置跨域:config->index.js

module.exports = {
 dev: {
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
   '/api':{
    target:'http://localhost:80', //这里配置的是 请求接口的域名
    // secure: false, // 如果是https接口,需要配置这个参数
    changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
    pathRewrite:{
     '^/api':'' //路径重写,这里理解成用'/api'代替target里面的地址.
    }
   }
  },
 }

2.设置api

2.1文件目录

Vue proxyTable配置多个接口地址,解决跨域的问题

2.2 api.js 编码

import axios from 'axios'

axios.defaults.baseURL = '/api';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.withCredentials = true

//接口自定义

//修改用户信息接口
export const updateOneUser = params => {
 return axios.post('/anta/anta-back/src/php/updateUser.php', params)
  .then(res => res.data)
};

3.组件中引用

import {updateOneUser} from "../../api/api"
methods:{
  //给后台发送数据
  var params = new URLSearchParams();
  params.append('userphone', this.watchStudentInfo.userphone);
  params.append('userpass', this.watchStudentInfo.userpass);
  console.log(params)
  updateOneUser(params).then(data=>{
   //后台返回的数据
   if(data==1){
    //添加成功
    this.$message.success('修改成功')
   }else{
    //失败
    this.$message.success('修改失败')
   }
  }).catch(error=>{
   this.$message.success('修改失败')
  })
}

以上这篇Vue proxyTable配置多个接口地址,解决跨域的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
关于ES6尾调用优化的使用
Sep 11 #Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 #Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 #Javascript
JavaScript实现简单日历效果
Sep 11 #Javascript
vue $mount 和 el的区别说明
Sep 11 #Javascript
JavaScript 判断数据类型的4种方法
Sep 11 #Javascript
jQuery实现日历效果
Sep 11 #jQuery
You might like
php5 and xml示例
2006/11/22 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
简单谈谈Python中的json与pickle
2017/07/19 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
敏捷开发的主要原则都有哪些
2015/04/26 面试题
建筑自我鉴定
2013/10/19 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
个人简历自我评价
2014/01/06 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
涨价通知怎么写
2015/04/23 职场文书
接收函
2019/04/22 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
写好Python代码的几条重要技巧
2021/05/21 Python
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
Python中requests做接口测试的方法
2021/05/30 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫