vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参
一:跨域请求代理
1:打开config/index.js
module.exports{
dev: {
}
}
在这里面找到proxyTable{},改为这样:
proxyTable: {
'/api': {
target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': ''//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
}
2:在需要调接口的组件中这样使用:
axios.post('/api/yt_api/login/doLogin',postData)
.then(function (response) {
console.log(1)
console.log(response);
})
.catch(function (error) {
console.log(error);
})
注意:原接口:http://http://121.41.130.58:9090/yt_api/login/doLogin
页面调用:http://localhost:8081/api/yt_api/login/doLogin ——这里多了一个/api/不是多余的,不要删
二:axios传参
1:Vue官方推荐组件axios默认就是提交 JSON 字符串,所以我们要以json字符串直接拼接在url后面的形式,直接将json对象传进去就行了
let postData = {
companyCode:'tur',
userName:'123456789123456789',
password:'123456'
}
axios.get('/api/yt_api/login/doLogin',{
params: {
...postData,
}
})
.then(function (response) {
console.log(1)
console.log(response);
})
.catch(function (error) {
console.log(error);
});
这里我们将postData这个json对象传入到post方法中,页面中的形式为:
2:以key:val的形式传参
let postData = qs.stringify({
companyCode:'tur',
userName:'123456789123456789',
password:'123456'
})
我们需要对这个json对象操作,这里的qs你需要先安装
npm install qs
再导入
import qs from 'qs'
面中的形式为:
vue.js学习之 跨域请求代理与axios传参的更多相关文章
- Vue.js 2.0 跨域请求数据
Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...
- vue-cli 3.0之跨域请求代理配置及axios路径配置
vue-cli 3.0之跨域请求代理配置及axios路径配置 问题:在前后端分离的跨域请求中,报跨域问题 配置: vue.config.js: module.exports = { runtimeCo ...
- 【Java Web开发学习】跨域请求
[Java Web开发学习]跨域请求 ================================================= 1.使用jsonp ===================== ...
- Jsonp的js实现,跨域请求,同源策略机制
Jsonp的js实现,跨域请求,同源策略机制1.跨域请求:请求URL的协议,域名,端口三者之间任意一个与当前页面地址不同即为跨域 存在跨域的情况: 网络协议不同,端口不通,域名不同,子域名不同,域名和 ...
- MediaElement.js之浏览器跨域请求视频播放
浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...
- Vue三步完成跨域请求
三步完成跨域请求 ①main.js中: Vue.prototype.HOME = '/api'; ② config/index.js中: module.exports = { dev: { // Pa ...
- Django学习---jsonp跨域请求
jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...
- NodeJ node.js Jquery Ajax 跨域请求
Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...
- JS 中的跨域请求
跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及 ...
随机推荐
- Zabbix——部署(agent和proxy安装)
前提条件: 已经完成对Zabbix-server的安装 已经完成对Mysql的安装 并且相互和正常使用和访问 配置agent服务器: rpm -Uvh https://repo.zabbix.com/ ...
- window下使用Composer安装yii2
1.在 Windows 中,先下载并运行 Composer-Setup.exe,安装过程需选择php的运行目录,安装完后在windows的cmd下运行composer看看是否安装成功 2.安装完Com ...
- Java核心技术36讲----------谈谈final、finally、finalize有什么不同
一.final 1.final修饰方法时,需要注意的点: #final修饰方法时,之前的第二个原因是效率.但是如果方法过于庞大,可能看不到内嵌调用带来的任何性能提升.在最近的Java版本中,不需要使用 ...
- I2C驱动
在I2C总线驱动下,也是硬件设备和驱动分离,使以就需要通过它们的名字来匹配,这样驱动的probe函数才能被调用 查看linux内核的Documents目录下的说明文件,可知构造i2c设备有4种方法: ...
- Python 1.1数字与字符基础
一. 基础数字操作 1.加减乘除以及内置函数: min(), max(), sum(), abs(), len() math库: math.pi math.e, math.si ...
- PC环境搭建——虚拟机配置双网卡
Vmware虚拟机三种网络模式详解 TCP/IP协议四层模型: 应用层 传输层 网络层 物理接口 桥接模式时,主机和虚拟机在同一个网段,之间可以相互访问 NAT模式时,主机和虚拟机不在同一网段,之间通 ...
- PAT (Basic Level) Practice 1008 数组元素循环右移问题
个人练习 一个数组A中存有N(>)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥)个位置,即将A中的数据由(A0A1⋯AN−1)变换为(AN−M⋯AN ...
- PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to a ...
- 北京Uber优步司机奖励政策(3月21日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- OpenCV 3.2 Tracking 物体跟踪
跟踪就是在连续视频帧中定位物体,通常的跟踪算法包括以下几类: 1. Dense Optical Flow 稠密光流 2. Sparse Optical Flow 稀疏光流 最典型的如KLT算法(Kan ...