Koa 代理http請求驱入，解決跨域問題

1昆烁、為什么用Koa做跨域代理吊骤？

"最初為了解決跨域問題，我把站點(diǎn)部署到了nginx上就解決了問題善玫。一次偶然的面試機(jī)會水援，面試官提出了一個(gè)假設(shè)我需要對提交api和api返回的數(shù)據(jù)進(jìn)行適配，那么nginx是不是就無法滿足了茅郎。當(dāng)然這個(gè)問題的提出蜗元，讓我考慮到其實(shí)如果自己搭一個(gè)站點(diǎn)，通過這個(gè)站點(diǎn)進(jìn)行轉(zhuǎn)發(fā)系冗，適配第三方api的請求和應(yīng)答不就好了奕扣。那么要搭一個(gè)站點(diǎn)的語言其實(shí)有很多，例如.net,java,nodejs,php...掌敬，那為什么最后選擇nodejs呢惯豆？對于我來說最重要的原因池磁，應(yīng)該就是nodejs的輕量級和javascript語言親和性。

2楷兽、搭建nodejs應(yīng)用

由于Koa2剛出地熄，畢竟學(xué)技術(shù)，那么就學(xué)最新的芯杀。
既然搭建程序那么就從程序的入口開始做端考，首先寫程序的路由

const fs = require('fs')
const Router = require('koa-router');
const {httpHandle} = require('../Infrastructure/httpHandle');
const koaBody = require('koa-body')({
    multipart :true
});

const render = (page) => {
    return new Promise((resolve, reject) => {
        let viewUrl = `./view/${page}`
        fs.readFile(viewUrl, "binary", (err, data) => {
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}

let api = new Router();

api.get('*', httpHandle)
    .post('*', koaBody, httpHandle)
    .put('*', koaBody, httpHandle).del('*', koaBody, httpHandle);

let common = new Router();
common.get('*', async (ctx) => {
    ctx.body = await render('index.html');
})

let router = new Router();
router.use('/api', api.routes(), api.allowedMethods());
router.use('/', common.routes(), common.allowedMethods());
module.exports = router;

其次就是處理代理的請求

const httpRequest = (ctx) => {
    return new Promise((resolve) => {
        delete ctx.request.header.host;
        const options = {
            host,
            port,
            path: ctx.request.url.substr(4, ctx.request.url.length),
            method: ctx.request.method,
            headers: ctx.request.header
        }
        let requestBody='',
            body,
            head,
            chunks = [],
            fileFields,
            files,
            boundaryKey,
            boundary,
            endData,
            filesLength,
            totallength = 0;

        if (ctx.request.body) {
            console.log(ctx.request.header['content-type'])
            if (ctx.request.header['content-type'].indexOf('application/x-www-form-urlencoded') > -1) {
                requestBody = query.stringify(ctx.request.body);
                options.headers['Content-Length'] = Buffer.byteLength(requestBody)
            } else if (ctx.request.header['content-type'].indexOf('application/json') > -1) {
                requestBody = JSON.stringify(ctx.request.body);
                options.headers['Content-Length'] = Buffer.byteLength(requestBody)
            } else if (ctx.request.header['content-type'].indexOf('multipart/form-data') > -1) {
                fileFields = ctx.request.body.fields;
                files = ctx.request.body.files;
                boundaryKey = Math.random().toString(16);
                boundary = `\r\n----${boundaryKey}\r\n`;
                endData = `\r\n----${boundaryKey}--`;
                filesLength = 0;

                Object.keys(fileFields).forEach((key) => {
                    requestBody +=  `${boundary}Content-Disposition:form-data;name="${key}"\r\n\r\n${fileFields[key]}`;
                })

                Object.keys(files).forEach((key) => {
                    requestBody += `${boundary}Content-Type: application/octet-stream\r\nContent-Disposition: form-data; name="${key}";filename="${files[key].name}"\r\nContent-Transfer-Encoding: binary\r\n\r\n`;
                    filesLength += Buffer.byteLength(requestBody,'utf-8') + files[key].size;
                })

                options.headers['Content-Type'] = `multipart/form-data; boundary=--${boundaryKey}`;
                options.headers[`Content-Length`] = filesLength + Buffer.byteLength(endData);
            } else {
                requestBody = JSON.stringify(ctx.request.body)
                options.headers['Content-Length'] = Buffer.byteLength(requestBody)
            }
        }

        const req = http.request(options, (res) => {
            res.on('data', (chunk) => {
                chunks.push(chunk);
                totallength += chunk.length;
            })

            res.on('end', () => {
                body = Buffer.concat(chunks, totallength);
                head = res.headers;
                resolve({head, body});
            })
        })

        ctx.request.body && req.write(requestBody);

        if (fileFields) {
            let filesArr = Object.keys(files);
            let uploadConnt = 0;
            filesArr.forEach((key) => {
                let fileStream = fs.createReadStream(files[key].path);
                fileStream.on('end', () => {
                    fs.unlink(files[key].path);
                    uploadConnt++;
                    if (uploadConnt == filesArr.length) {
                        req.end(endData)
                    }
                })
                fileStream.pipe(req, {end: false})
            })
        } else {
            req.end();
        }

    })
}

由此簡單的幾行代碼就實(shí)現(xiàn)了通過nodejs實(shí)現(xiàn)跨域的請求代理。 github鏈接

nginx代理config配置 如下

server {
      listen          1024; 
      server_name     tigrex:1024;
      root            home/TuoTuo.v2.UI;
      index           index.html;
      access_log      logs/tigrex.access.log;
      error_log       logs/tigrex.error.log;

      charset         utf-8;
      
      location /api {
         proxy_pass    http://127.0.0.1:1023/;
         proxy_set_header Host $host;
         proxy_redirect off;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      }   
      
      location / {
          try_files $uri $uri/ /index.html;          
        }
    }