node搭建简易服务器，设置跨域访问

前言：对于前端开发而言，写写ui想必对于小伙伴来说也就是分分钟的事，大部分的时间可以说都是耗在后台接口对接加调试上了，当然，这也不能怪后端的小伙伴，因为主要逻辑都在后端，他们还是比较辛苦滴，为了让前端跟后端依赖性降低，因此提前定义好接口文档就很必要了，那接口文档出来后，我们想模拟mock数据又该怎么办呢？

哈哈，之前做android没接触过web前端的时候，都是java结合tomcat直接搭建一个mock数据的服务器出来，具体实现步骤我就不演示了哈，接触过java的想必分分钟就可以搞定了。

最近一直在做web前端项目，然后边做项目边补web基础知识，唉唉，说多了都是泪，谁让自己选择做程序猿呢～前段时间刚好学习到了node的http模块，准备按照之前的套路搭一套简单的mock服务，纯属个人学习笔记，欢迎指正，大牛勿喷～～

我就以一个简单的前端项目为准了:

在这里插入图片描述

index.js文件是我们的服务器文件：

const fs = require('fs')
const path = require('path')
const http = require('http')
const portfinder = require('portfinder')
portfinder.basePort = process.env.PORT || 8090
const chalk = require('chalk')
const server = http.createServer(function (request, response) {
    dealPost(request, response)
})
portfinder.getPort((err, port) => {
    if (!err) {
        console.log(chalk.green('Mock-Server is running at http://127.0.0.1:' + port))
        server.listen(port)
    }
})
function dealPost(request, response) {
    fs.readFile(path.resolve(__dirname, 'data.json'), 'utf-8', (err, data) => {
        try {
            if (!err) {
                const API = JSON.parse(data)
                const apis = findApiByUrl(API, request.url)
                if (apis.length > 0) {
                    response.writeHead(200, {
                        'Content-Type': 'application/json;charset=UTF-8',
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Headers': 'Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE'
                    })
                    fs.readFile(path.resolve(__dirname, apis[0].path), 'utf-8', (err2, data2) => {
                        response.end(data2)
                    })
                } else {
                    erro(response, '404')
                }
            } else {
                erro(response)
            }
        } catch (e) {
            erro(response, e)
        }
    })
}
function erro(response, code = '500') {
    response.writeHead(200, {
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE'
    })
    response.end(code)
}
function findApiByUrl(api, url) {
    return (api.length > 0 ? api.filter((item, index) => item.api === url) : [])
}

data.json文件是我们的接口列表文件：

[
  {
    "api": "/test", //接口名称
    "path": "test.json" //接口返回数据文件
  }
]

test.json文件是我们的测试接口数据文件：

{
  "code": 200,
  "message": "success",
  "data": {
    "content": "test"
  }
}

然后我们执行index.js文件：

在这里插入图片描述

然后我们在浏览器访问一下我们的接口：

扫描二维码关注公众号，回复： 4282389 查看本文章

在这里插入图片描述

哈哈，我们一个简单的mock服务器就已经搭起来了，为了方便，我们直接在服务器中设置了跨域访问：

 response.writeHead(200, {
                        'Content-Type': 'application/json;charset=UTF-8',
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Headers': 'Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE'
                    })

我们还可以把命名放到package.json中，比如：

{
  "name": "mockserver",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "node mock/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^2.4.1",
    "portfinder": "^1.0.19"
  }
}

然后我们可以直接在项目中执行：

➜  MockServer npm run server

> [email protected] server xxx/WebstormProjects/MockServer
> node mock/index.js

Mock-Server is running at http://127.0.0.1:8091

先到这里啦，欢迎志同道合的小伙伴入群，一起交流一起学习～～加油骚年！！
qq群链接：
在这里插入图片描述

node搭建简易服务器，设置跨域访问

猜你喜欢