Mac 配置 Vue 项目端口转发（1024 -> 80）

Mac 配置 Vue 项目端口转发（1024 -> 80）

背景

在 Mac 上，Vue CLI 项目默认使用高位端口（如 1024），但有时需要将请求转发到 80 端口。由于 80 是特权端口，需要特殊配置。

配置步骤

1. 配置 Vue 项目端口

在 vue.config.js 中设置开发服务器端口为 1024：

devServer: {
  port: 1024,
  host: '0.0.0.0',
  // ... 其他配置
}

2. 设置端口转发

使用 pfctl 命令设置端口转发（将 80 端口转发到 1024）：

1. 创建端口转发规则文件：

echo "
rdr pass inet proto tcp from any to any port 80 -> 127.0.0.1 port 1024
" | sudo tee /etc/pf.anchors/portforward

2. 启用端口转发：

sudo pfctl -ef /etc/pf.anchors/portforward

3. 如果遇到权限问题，先启用 pf：

sudo pfctl -e

4. 验证规则是否生效：

sudo pfctl -s nat

3. 取消端口转发

如果需要取消端口转发：

sudo pfctl -d

验证

配置完成后，可以通过以下地址访问：

• 本地访问：http://localhost/xxx
• 局域网访问：http://<你的IP地址>/xxx

注意事项

1. 确保 80 端口没有被其他程序占用
2. 如果遇到权限问题，检查是否使用了 sudo 命令
3. 修改配置后需要重启开发服务器
4. 如果使用 nginx，需要确保 nginx 配置正确

常见问题

1. 如果出现 "command not found"，确保使用的是 pfctl 而不是已废弃的 ipfw
2. 如果转发不生效，检查防火墙设置
3. 如果访问出现 403 错误，检查代理配置和请求头设置

相关命令

• 查看端口占用：sudo lsof -i :80
• 查看转发规则：sudo pfctl -s nat
• 重启开发服务器：npm run serve