服务搭建应用场景

前端模块化基本成为了不可或缺的一步了，最近自己学习的时候，用的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) {
            // 如果文件不存在，返回 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可以进行托管中间件

1. 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,
  }

2. 服务搭建代码：

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} 开启成功!`);
});

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

服务搭建插件介绍

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

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/