后端

端口在3000
使用jsonwebtoken和koa-jwt生成令牌并返回
对’/api/userinfo’端口,先验证令牌是否通过,若通过返回数据

const Koa = require('koa');
const Router = require('koa-router');
// 生成令牌、验证令牌
const jwt = require('jsonwebtoken');
const jwtAuth = require('koa-jwt');// 生成数字签名的密钥
const secret = 'odd marron';const app = new Koa();
const router = new Router();router.get('/api/login', async ctx => {const { username, passwd } = ctx.query;console.log(username, passwd);if (username === 'admin' && passwd === '123456') {// 生成令牌const token = jwt.sign({data: { name: '好吃的栗子' }, // 用户数据exp: Math.floor(Date.now() / 1000) + 60 * 60 // 过期时间},secret);ctx.body = { code: 1, token };} else {ctx.status = 401;ctx.body = { code: 0, message: '用户名或密码错误' };}
});router.get('/api/userinfo',jwtAuth({ secret }),   // 检查密钥async ctx => {ctx.body = {code: 1,data: {name: '栗子',age: 18}}}
)app.use(router.routes());
app.listen(3000,()=>{console.log('[server] server is runnint at http://127.0.0.1:3000');
});

前端

运行在8080端口,故产生了跨域
在vue.config.js中添加代理
对所有’/api’开头的请求进行代理

configureWebpack:{devServer:{proxy:{'/api':{target: 'http://127.0.0.1:3000',changeOrigin: true}}}
}

vue --- 前端代理发送http请求相关推荐

Vue前端axios发送请求后端数据样例
1.导入脚手架axios.min.js和vue.min.js 2.模拟请求数据data.json {"sucess": true,"code": 20000,& ...
Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
jquery发送ajax请求_复习之Vue用axios发送ajax请求
Axios是一个基于promise的HTTP库. 浏览器支持情况:Chrome.Firefox.Safari.Opera.Edge.IE8+. 官网:https://github.com/axios/ ...
vue 使用axios发送的请求使用md5加密
之前使用axios发送请求都是直接发送,没有加入任何加密方式,但是这种情况其实是不安全的,最近项目要求使用md5进行加密. 在项目根目录下面安装md5 npm install --save js-md ...
vue 断开正在发送的请求_vue 发送请求频繁时取消上一次请求
前言: 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到展示的结果可能不是最后一次发送请求返回的结果,且对性能也有非常大的影响. 场景: 列表式切换商品,有时候上一次请求的结果非常慢,而 ...
TP5后端,VUE前端请求聚合数据成语大全
PS: 聚合接口上描述的是成语大全,其实只是以用户查找字为开头的成语而已.先上演示效果: 1: VUE 前端代码 <template><div class="content ...
前端代理解决跨域问题
涉及知识点 1.前端代理:解决跨域的问题 1.1了解跨域代理:https://segmentfault.com/a/1190000010719058 跨域是由浏览器同源策略引起的,是指页面请求的接口地 ...
vue前端如何向后台发送值_VUE前端从后台请求过来的数据进行转换数据结构操作...
我就废话不多说了,大家还是直接看代码吧` let label(){ let _this = this; let _offset = (_this.pagination.currentPage - 1) ...
TP5后端,VUE前端请求聚合数据新闻接口
问题描述: TP5当后端,VUE当前端, 请求聚合数据新闻接口演示效果如下: ps: 最开始加载页面的时候,只加载本地的文件(因为请求次数有限制) 问题解决: 1: vue 文件: <temp ...

vue --- 前端代理发送http请求

后端

前端

vue --- 前端代理发送http请求相关推荐

最新文章

热门文章