前言
在前端开发中，有时需要快速建立一个本地服务来测试网站或 API 的功能，同时还经常会遇到由于跨域而导致无法请求某些资源或接口的问题。针对这些情况，我们可以使用 npm 包 webserver 来搭建一个本地服务器，快速测试，还支持自定义路由和跨域设置。
安装
在终端中执行以下命令进行安装：
npm install -g webserver
使用
在命令行中执行以下命令启动服务器：
webserver
默认会以当前目录为根目录，并监听 localhost:8080。打开浏览器，访问 http://localhost:8080，就可以看到该目录下的文件列表了。
下面介绍一些常用的选项和功能。
指定根目录
可以使用 -d 或 --dir 参数来指定根目录。
例如，指定根目录为 public 目录：
webserver -d public
指定端口号
可以使用 -p 或 --port 参数来指定端口号。
例如，指定端口号为 3000：
webserver -p 3000
自定义路由
可以使用 -r 或 --router 参数来定义路由规则。
例如，将 /api/send 请求转发到 http://api.example.com/send：
webserver -r '/api/send=http://api.example.com/send'
支持正则表达式，例如将 /api/user/1 转发到 http://localhost/user?id=1：
webserver -r '^/api/user/(\d+)=http://localhost/user?id=$1'
此外，还可以通过配置文件来定义路由规则。
创建一个名为 routes.json 的文件，在其中添加路由规则。
例如，将 /api/send 请求转发到 http://api.example.com/send：
{
"/api/send": "http://api.example.com/send"
}然后启动服务器并指定配置文件：
webserver -c routes.json
解决跨域问题
可以使用 -H 或 --headers 参数来设置响应头，从而解决跨域问题。
例如，设置 Access-Control-Allow-Origin 为 *：
webserver -H 'Access-Control-Allow-Origin=*'
或者使用配置文件进行设置。
创建一个名为 headers.json 的文件，在其中添加响应头设置。
例如，设置 Access-Control-Allow-Origin 为 *：
{
"Access-Control-Allow-Origin": "*"
}然后启动服务器并指定配置文件：
webserver -s header.json
总结
webserver 是一个非常实用的 npm 包，可以用于快速地搭建本地服务器并解决跨域问题，同时支持自定义路由设置。希望本篇文章对你有所帮助，也欢迎大家多多尝试使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61555