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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
原生js实现下拉框选择组件
Jan 20 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
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
js实现随机8位验证码
2020/07/24 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
快速入手Python字符编码
2016/08/03 Python
Python中Threading用法详解
2017/12/27 Python
numpy返回array中元素的index方法
2018/06/27 Python
Django实现表单验证
2018/09/08 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python判断正负数方式
2020/06/03 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
类和结构的区别
2012/08/15 面试题
银行爱岗敬业演讲稿
2014/05/05 职场文书
大学英语专业求职信
2014/06/21 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
老人院义工活动感想
2015/08/07 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
python本地文件服务器实例教程
2021/05/02 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js