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

服务搭建应用场景

前端模块化基本成为了不可或缺的一步了，最近自己学习的时候，用的cdn引入的vue，使用了EsModule语法，但使用import语法，会产生跨域问题，故自己本地搭建一个服务（不需要下载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) {// 如果文件不存在，返回 404res.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 是项目的打包资源路径，一般为根目录下distapp.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} 开启成功!`);
});

以上就可以根据不同环境做不同的接口转发啦

服务搭建插件介绍

下面是一些概念性的介绍感兴趣的可以看看

app.use介绍

app.use()可以用于加载第三方模块插件、定义路由、设置静态文件目录等。例如：
‌加载第三方中间件‌：可以使用app.use()来加载如body-parser等中间件，用于解析POST请求中的JSON或URL编码数据。

‌定义路由‌：通过app.use()可以定义处理特定路径的路由。例如，app.use(“/test”, (req, res) => { res.send(“测试成功!”) })会匹配所有以"/test"开头的请求。

‌设置静态文件目录‌：使用app.use(“/public”, express.static(path.join(__dirname, “./public”)))可以设置静态文件目录，使得静态文件可以直接通过URL访问。

http-proxy-middleware 介绍

‌http-proxy-middleware的主要作用是将客户端发送的请求转发到目标服务器，并将响应返回给客户端‌。它是一个代理中间件，广泛用于Node.js环境，特别是在开发环境中解决跨域问题，以及在生产环境中实现复杂的路由需求‌。

具体作用和应用场景
‌解决跨域问题‌： 在开发环境中，http-proxy-middleware可以通过代理服务器转发请求，使得浏览器请求的是本地路径，从而避免跨域问题。这使得开发者可以在本地环境中测试那些需要跨域请求的功能‌。

‌代理服务器功能‌：http-proxy-middleware可以作为一个代理服务器，将客户端的请求转发到目标服务器，并处理响应后返回给客户端。这一过程简化了HTTP请求的处理，使得服务器与客户端之间的连接、通信和同步变得更加轻松‌。

‌灵活的路由配置‌： 通过配置不同的路由规则，http-proxy-middleware可以根据请求的不同路径转发到不同的目标服务器。这使得在开发微服务架构的应用时，不同后端服务可以在同一前端应用中平滑地交互‌。

‌安全性增强‌：通过代理服务器转发请求，可以隐藏客户端的真实IP地址，提高网络安全性。此外，代理服务器还可以进行SSL证书验证，确保数据传输的安全性‌。

其他

想要深入了解服务相关内容，可以看看专业平台资料
express：

https://www.expressjs.com.cn/

http-proxy-middleware:

https://www.npmjs.com/package/http-proxy-middleware

path

https://nodejs.p2hp.com/api/v19/path/