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

偏执的太偏执、 2022-04-18 05:43 360阅读 0赞

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70]

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文件：

![在这里插入图片描述][20181109110828421.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 1]

哈哈，我们一个简单的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
    
    > mockserver@1.0.0 server xxx/WebstormProjects/MockServer
    > node mock/index.js
    
    Mock-Server is running at http://127.0.0.1:8091

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70]: /images/20220418/a5316468d3294274b508b257715cf1bf.png
[20181109110828421.png]: /images/20220418/b7d9333c52114057813d2a6b6b00c923.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z2X2J1Zw_size_16_color_FFFFFF_t_70 1]: /images/20220418/69fca1e2840243c191c8556b9e7d9735.png
[SouthEast]: /images/20220418/d2239839a5894c5481da4e8412583941.png