koa代碼
const koa = require('koa');
const fs = require('fs');
const app = new koa();
const Router = require('koa-router');
const cors = require('koa2-cors');
const koaBody = require('koa-body'); //解析文件流
app.use(koaBody({
multipart: true, // 運行多個文件
strict: true, //默認(rèn)true，不解析GET,HEAD,DELETE請求
formidable: {
maxFileSize: 2 * 1024 * 1024 // 設(shè)置上傳文件大小最大限制，默認(rèn)2M
}
}));
// const bodyParser = require('koa-bodyparser'); // 不支持 form-data
// app.use(bodyParser({
// extendTypes: {
// json: ['application/x-javascript', 'application/x-www-form-urlencoded', 'multipart/form-data', 'text/xml'] // 支持的類型
// }
// })); // post 獲取參數(shù)
//
app.use(cors({
origin: function (ctx) {
if (ctx.url === '/test') {
return "*"; // 允許來自所有域名請求
}
return "*"; // 允許來自所有域名請求
// return 'http://localhost:8080'; // 這樣就能只允許 http://localhost:8080 這個域名的請求了
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 0,
credentials: true,
allowMethods: ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));
// 主路由
let home = new Router();
home.get('/', async (ctx) => {
let url = ctx.url;
let request = ctx.request;
let req_query = request.query;
let req_queryString = request.querystring;
const body = {
url,
req_query,
req_queryString,
};
ctx.body = body;
});
// 子路由
let page = new Router();
page.get('/404', async (ctx) => {
ctx.body = '404.page!';
})
.get('/helloworld', async (ctx) => {
ctx.body = 'hello world page';
})
.get('/init', async (ctx) => {
ctx.body = ctx.request.query;
})
.post('/post', async (ctx) => {
console.log(ctx.request.query); // 獲取 url 后面參數(shù)
const { a, b } = ctx.request.body;
const body = {
a, b
};
ctx.body = body;
})
.post('/postForm', async (ctx) => {
const { a, b } = ctx.request.body;
const body = {
a, b
};
ctx.body = body;
})
.post('/postText', async (ctx) => { // text/xml
const body = `
<a >百度鏈接</a>
`;
ctx.body = body;
})
.post('/uploadfile', async (ctx) => { // 上傳文件
const file = ctx.request.files.file; // 獲取上傳文件
const size = file.size; // 大小
const type = file.type; // 類型
const name = file.name; // 名字
console.log(size, type, name);
ctx.body = { name };
});
// 裝載所有子路由
let router = new Router();
router.use('/', home.routes(), home.allowedMethods());
router.use('/test', page.routes(), page.allowedMethods());
// 加載路由中間件
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('啟動成功');
});
axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
li{
height: 40px;
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="file" name="a" id="file">
<button type="submit" onclick="sub()">提交,文件上傳形式</button>
<ul>
<li onclick="post_json()">一般的json形式，最常見</li>
<li onclick="post_form()">form表單形式</li>
<li onclick="post_text()">text形式-不常用</li>
<li onclick="get_init()">get請求</li>
</ul>
<div id="box">
<h3>請求結(jié)果</h3>
</div>
</body>
<script>
const box = document.querySelector('#box');
// axios.defaults.headers.common['Authorization'] = 'zhangxinyong'; // 自定義頭信息
// 注意 不要寫axios.defaults.headers.post 這樣無效
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; // 默認(rèn)的form表單就是這種形式
// axios.defaults.headers['Content-Type'] = 'multipart/form-data'; // 對文件分割上傳
// axios.defaults.headers['Content-Type'] = 'application/json'; // 最常見的方式。
// axios.defaults.headers['Content-Type'] = 'text/xml'; // 不常見
const url = 'http://127.0.0.1:3000/';
axios.get(url + '?a=4&b=4').then((res) => {
console.log(res.data);
});
function get_init() {
axios.get(url + 'test/init?a=4&b=4').then((res) => {
console.log(res.data);
});
}
function post_json() {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
axios.post(url + 'test/post?x=json', { a: 3, b: 4 }, config).then((res) => {
console.log(res.data);
});
}
// 一般的form 表單形式
function post_form() {
const config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
const formData = new FormData();
formData.append('a', 4444444);
formData.append('b', 33333);
axios.post(url + 'test/postForm?x=form', formData, config).then((res) => {
console.log(res.data);
});
}
// multipart/form-data
function sub() {
const formData = new FormData();
formData.append('file', document.querySelector('#file').files[0]);
formData.append('type', 2);
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
axios.post(url + 'test/uploadfile', formData, config).then((res) => {
console.log(res.data);
});
}
// text 不常用。就不介紹了
function post_text() {
const config = {
headers: {
'Content-Type': 'text/xml'
}
};
axios.post(url + 'test/postText?x=text', { a: 3, b: 4 }, config).then((res) => {
box.innerHTML += res.data;
});
}
// const http = axios.create({
// url: 'test/post?x=uuuuuuuu',
// baseURL: url,
// mthod: 'post',
// params: { a: 33, b: 000 }, // url 拼接的
// data: {
// x: 'cans'
// },
// // headers: {
// // 'Content-Type': 'text/xml'
// // }
// });
// http.post(url + 'test/post?x=uuuuuuuu', { a: 3, b: 4 }).then((res) => {
// console.log(res.data);
// });
</script>
</html>
