axios FastMock 跨域 代理
发送请求:
实现:发送请求,获取数据。
原本想自己写服务,后来无意间找到FastMock这个东东,于是就有了下文。。。
首先我安装了axios,在fastmock注册好了并创建了一个接口,怎么搞自行百度。
Q&A:
Q:怎么请求到?
A:当然是用axios了。
代码如下:
<script>
export default {
name: 'HelloWorld',
data () {
return {
user:''
}
},
mounted () {
console.log('加载...')
this.$axios.post('https://www.fastmock.site/mock/e24355f6a27dfe0707757f3ea7e687d4/Ts/login'
).then(function(res){
console.log(res);
}).catch(function(res){
console.log(res);
});
}
}
</script>
跨域/代理:
下面我们进行设置,给axios的baseURL赋值‘/api‘
axios.defaults.baseURL = '/api'
接下来不管怎么请求,都会有xxxxx/api/xxx
然后在config=>index.js中找到 proxyTable:{ },添加如下代码:
proxyTable: {
'/api': {
target: 'https://www.fastmock.site/mock/e24355f6a27dfe0707757f3ea7e687d4/Ts',
changeOrigin: true,
}
},
- 开头的 ’/api‘ 表示当地址请求地址中存在/api/xxxx这种请求格式时将/api之前的内容换成target的值,那么还记得刚刚设置的 axios.defaults.baseURL = '/api' 吗?是不是妙哉~
- target:你的api地址。
- changeOrigin:是否可跨域。
接下来请求直接写成 /login就行了
//使用代理地址,由于main.js中baseURL为/api,所以所有请求都会走代理地址,只要写请求方法就行
this.$axios
.post('/login',{'username':'admin','password':'123456'})
.then(response=> {console.log(response)} )
.catch(error=>console.log(error))
到这请求就完成了,附上fastmock的接口(fastmock文档中的)
{
"code": "0000",
"data": {
"verifySuccess": function({_req, Mock}) {
return _req.body;
},
"userInfo": function({_req, Mock}) {
let body = _req.body;
if (body.username === 'admin' && body.password === '123456') {
return Mock.mock({
username: "admin",
email: "@email",
address: "@address"
});
} else {
return null;
}
},
},
"desc": "成功"
}
PS:不得不吐槽下,准备好复制进来的文本和图片加载不出来,就一直转转转转转转转转<云计算中>~~~~~~~ @_@
axios FastMock 跨域 代理的更多相关文章
- axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...
- 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库
一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 no ...
- Next.js 配置接口跨域代理转发
使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能. 先安装好 express 和 http-proxy-middlewa ...
- vue-cli 前端开发,后台接口跨域代理调试问题
使用 webpack的方式开发的时候,前台开发过程中需要调用很多后台的数据接口,但是通常前后台分离的开发方式,后台的接口数据很可能是不方便或者是不能在前端同学的电脑上运行的,也就出现了所谓的跨域问题. ...
- nodejs之mock与跨域代理的三两事
emmm...好久没写博客了,都忘了该怎么开始. 那就先说下mockjs.因为一些原因,导致后台接口没有数据,那么我们就开始自己造数据,使用的是比较流行mockjs,根据文档就能简单的配置,然后开始愉 ...
- eclipse加速/Nginx配置跨域代理
下班时间到啦! --下班都是他们的,而我,还是什么都没有. eclipse加速 去掉包含js文件的包的js验证,否则每次启动都需要进行校验(右击项目->properties) Nginx配置跨域 ...
- Nginx 跨域代理
安装环境: win10 nginx-1.17.2 安装: 在写前端调用后台接口时,报了跨域的错误. 调试地址:http://localhost:5500/demo/encAjax.html 接口地址: ...
- React网络请求跨域代理设置
之前的之所以可以请求其他域名下的网络数据,是因为我们在服务端设置了相关配置,如下所示 如果将其注释掉,再次测试,如下所示 此时便无法跨域操作,接下来介绍下React如何实现跨域代理 (1)分析 Rea ...
- vue跨域代理配置
实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...
随机推荐
- JMETER 审批任务实战
业务场景 我们需要对流程任务进行审批,这个和流程发起是不一样的,因为在流程发起时,只需要用户登录后,指定固定的流程方案和数据就可以发起流程了. 流程任务是需要获取任务ID再做任务审批的. 实现思路 1 ...
- 关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案
微信小程序开发环境苹果IOS真机预览报SSL协议错误问题 原文来自:https://blog.csdn.net/qq_27626333/articl ...
- 201871010135 张玉晶《面向对象程序设计(java)》第十一周学习总结
项目 内容 <面向对象程序设计(java)> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...
- halcon笔记1
* 获得二值图 Image_binread_image(Image, 'C:/Alex/halcon/test.bmp') // 读图 threshold (Image, Regions, , ) / ...
- springboot shiro 基本整合
springboot shiro 基本整合 https://www.w3cschool.cn/shiro/c52r1iff.html http://shiro.apache.org/configura ...
- spark 配置
1. mv slaves.template slaves slaves 文件添加 hadoop.slave01 hadoop.slave02 hadoop.slave03 2. cp spark-en ...
- windows上传文件到 linux的hdfs
一.windows上传文件到 linux的hdfs 1.先在 centos 上开启 hdfs, 用 jps 可以看到下面信息, 说明完成开启 2.在win上配置 hadoop (https://www ...
- tf.tile() 用法介绍
tile() 平铺之意,用于在同一维度上的复制 tile( input, #输入 multiples, #同一维度上复制的次数 name=None ...
- C++中#define与typedefine的区别
原文链接:https://www.cnblogs.com/fengfengqingqingyangyang/p/3270432.html (1)typedef是用来定义关键字/标识符的别名,并未分配内 ...
- Linux DNS分离解析与构建智能DNS服务器
一 构建DNS分离解析 方法一 : [root@localhost ~]# vim /etc/named.conf [root@localhost ~]# cd /var/named/ [root@l ...