前端快速搭建Node服务（解决跨域问题）

news2025/3/9 11:36:22

服务搭建应用场景

前端模块化基本成为了不可或缺的一步了，最近学习的时候，使用了EsModule语法，但使用import和export，会产生跨域问题，故自己本地搭建一个服务（不需要下载npm包），一步解决，真是超简单；

还有之前用过的接口转发（解决跨域）服务搭建，一起分享出来，希望可以帮助到各位程序yuan～

当然跨域除了服务接口转发方式以外，还可以用vue的devServer配置，还有Nginx反向代理，对于Nginx反向代理感兴趣的可以看看我的这篇博客～https://blog.csdn.net/weixin_44258964/article/details/146103202

服务搭建

极简服务搭建【解决本地跨域】

用到的是Node的内置模块http、fs、path，其中http用于创建、启动服务，fs则读取文件, path 设置路径
终端cd [目录下]，执行命令node server.js执行即可获取到端口号3000的本地服务

废话不多说，直接上代码

const http = require('http');
const fs = require('fs');
const path = require('path');

// 常见文件类型映射
const extNameMap = {
    '.html': 'text/html',
    '.js': 'text/javascript',
    '.css': 'text/css',
    'json': 'application/json',
    '.png': 'image/png',
    '.jpg': 'image/jpg'
}

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
    // 获取请求的 URL 路径
    const url = req.url;
    // 根据 URL 路径返回对应的文件
    let filePath = path.join(__dirname, url === '/' ? 'index.html' : url);
    // 读取文件并返回
    fs.readFile(filePath, (err, data) => {
        if (err) {
            // 如果文件不存在，返回 404
            res.writeHead(404, { 'Content-Type': 'text/plain' });
            res.end('404 Not Found');
        } else {
            // 根据文件类型设置 Content-Type，path.extname读取文件后缀名
            const extname = path.extname(filePath);
            const contentType = extNameMap[extname]
            // 返回文件内容
            res.writeHead(200, { 'Content-Type': contentType });
            res.end(data);
        }
    });
});

// 启动服务器，监听端口
const PORT = 3000;
server.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

以上就是一个服务器的简单搭建了，是不是巨简单
亲测好用，基本可以解决import 的跨域问题～

接口转发服务搭建

启动一个简易服务器，转发服务端接口（见proxy），其余路由指向index.html
使用的是express 搭建服务http-proxy-middleware 中间件转发服务接口
使用express.static创建dist静态资源服务器，在使用express.use可以进行托管中间件

proxy文件配置createProxyMiddleware参数结构

//proxy文件
module.exports = {
  dev: {
    '/api/': {
      target: 'https://xxx',
      changeOrigin: true,
    }
  },
  pre: {
 	'/api/': {
      target: 'https://xxx',
      changeOrigin: true,
   	}
  }
}
// createProxyMiddleware参数结构
{
    target: 'http://www.example.org/api',
    changeOrigin: true,
  }

服务搭建代码：

const path = require('path');
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

// 用于获取环境 process.argv - ['--env=dev']
function getArgs(args) {
  return args.reduce((argsDict, item) => {
    const [key = '', value] = item.split('=');
    return {
      ...argsDict,
      [key.replace(/-/gi, '')]: value,
    };
  }, {});
}
const { env = '' } = getArgs(process.argv.slice(2));

// 用于获取接口配置
const proxy = require('./proxy');

const app = express();
const port = 8002; // 自定义端口号（不要与已存在端口冲突）

// 转发所有接口服务
Object.keys(proxy[env]).forEach((route) => {
  app.use(route, createProxyMiddleware(proxy[env][route]));
});
// express.static创建dist静态资源服务器，在使用express.use可以进行托管
app.use(express.static(path.join(__dirname, '..', '/dist'))); // dist 是项目的打包资源路径，一般为根目录下dist

app.get('/*', function (req, res) {
  res.type('text/html');
  res.sendFile(path.join(__dirname, '..', '/dist/index.html'));
});

app.listen(port, () => {
  console.log('目前使用环境：', env);
  console.log(`服务器 ${port} 开启成功!`);
});