XAMPP如何配置一个域名对应多个端口
为什么需要为同一个域名配置多个端口
在日常的Web开发工作中，我们经常会遇到这样的场景：一个完整的项目由前端和后端两部分组成，前端页面运行在某个端口上，后端API接口运行在另一个端口上。例如，前端项目运行在8080端口，后端服务运行在8081端口。这时候，如果我们能通过同一个域名加上不同的端口号来访问这两个项目，开发和调试就会变得非常方便。
XAMPP作为一款广受欢迎的集成开发环境，默认情况下Apache服务器只监听80端口，而且一个域名默认只能对应一个服务端口。但是通过合理的配置，我们可以让Apache同时监听多个端口，并将同一个域名绑定到这些不同的端口上，从而实现对不同项目的访问。
本文将详细介绍如何在XAMPP环境中配置一个域名对应多个端口，整个过程分为四个主要步骤：修改Apache监听端口、配置虚拟主机规则、修改本地hosts文件、重启服务并验证。无论你是刚接触XAMPP的新手，还是有一定经验的开发者，都可以按照本文的指引顺利完成配置。
第一步：修改Apache监听端口
理解监听端口的概念
Apache服务器默认只会监听80端口，这是因为80端口是HTTP协议的默认端口。当我们访问一个网站时，如果不指定端口号，浏览器会自动使用80端口进行连接。但是，如果我们需要在同一台服务器上运行多个独立的Web应用，仅仅依靠80端口是不够的，因为每个应用都需要一个唯一的网络入口。
这时候就需要让Apache同时监听多个端口。每个端口就像一扇独立的大门，不同的应用可以通过不同的门进入服务器。例如，我们可以让Apache监听80、8080、8081三个端口，这样就能同时运行三个不同的项目。
实际操作步骤
首先，找到XAMPP安装目录下的Apache配置文件httpd.conf。如果你使用的是Windows系统，默认路径是C:\xampp\apache\conf\httpd.conf。当然，如果你的XAMPP安装在别的盘符或者自定义目录下，请根据实际情况找到对应的文件。
用文本编辑器打开httpd.conf文件，推荐使用Notepad++、Sublime Text或者VS Code这类专业编辑器，因为它们会高亮显示代码，方便查找和修改。在文件中搜索Listen 80这一行，它通常位于文件的靠前位置。
找到Listen 80之后，在其下方添加新的监听端口配置。假设我们需要添加8080和8081两个端口，就在Listen 80后面添加如下内容：
Listen 8080
Listen 8081需要注意的是，每行一个端口，格式就是Listen后面跟一个空格，然后是端口号。添加完成后，保存文件。此时先不要重启Apache，因为我们还需要配置虚拟主机规则。
选择端口时的注意事项
在选择要监听的端口时，有几个原则需要遵守。首先，端口号必须在1024到65535之间，因为1024以下的端口通常被系统保留或者被知名服务占用。其次，要确保选择的端口没有被其他程序占用，常见的冲突端口包括3306（MySQL）、3389（远程桌面）等。另外，也要避免使用一些常用软件的默认端口，比如8080有时会被某些代理软件占用。
第二步：配置虚拟主机规则
什么是虚拟主机
虚拟主机是一种在同一个Apache服务器上运行多个网站的技术。通过虚拟主机，我们可以让不同的域名或端口指向不同的项目目录。在本例中，我们将使用基于端口的虚拟主机，即通过不同的端口号来区分不同的项目。
虚拟主机的配置非常灵活，它可以让我们精确控制每个项目的访问权限、错误处理、日志记录等行为。合理配置虚拟主机不仅能提高开发效率，还能模拟线上真实的生产环境。
配置虚拟主机的详细步骤
找到XAMPP安装目录下的虚拟主机配置文件httpd-vhosts.conf，默认路径是C:\xampp\apache\conf\extra\httpd-vhosts.conf。用文本编辑器打开这个文件。
在文件的末尾，添加以下虚拟主机配置。这里我们假设自定义域名为local.test.com，三个端口对应的项目目录分别为：
- 80端口：
C:\xampp\htdocs\project1 - 8080端口：
C:\xampp\htdocs\project2 - 8081端口：
C:\xampp\htdocs\project3
配置代码如下：
# 80端口虚拟主机配置
<VirtualHost *:80>
ServerName local.test.com
DocumentRoot "C:/xampp/htdocs/project1"
<Directory "C:/xampp/htdocs/project1">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
# 8080端口虚拟主机配置
<VirtualHost *:8080>
ServerName local.test.com
DocumentRoot "C:/xampp/htdocs/project2"
<Directory "C:/xampp/htdocs/project2">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
# 8081端口虚拟主机配置
<VirtualHost *:8081>
ServerName local.test.com
DocumentRoot "C:/xampp/htdocs/project3"
<Directory "C:/xampp/htdocs/project3">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>配置参数详解
这段配置中涉及几个重要的参数，我们来逐一解释：
ServerName：指定虚拟主机绑定的域名。这里所有虚拟主机都使用同一个域名local.test.com，通过端口号来区分不同的项目。
DocumentRoot：指定项目的根目录路径。注意这里的路径分隔符必须使用正斜杠/，而不是Windows系统默认的反斜杠``。如果使用反斜杠，Apache可能会无法正确识别路径。
<Directory>块：用来设置目录的访问权限。其中Options Indexes FollowSymLinks表示允许列出目录内容和跟随符号链接；AllowOverride All表示允许使用.htaccess文件覆盖配置；Require all granted表示允许所有用户访问。
创建对应的项目目录
在配置完虚拟主机之后，别忘了在硬盘上创建对应的项目目录。按照上面的例子，需要在C:\xampp\htdocs\`下创建project1、project2、project3三个文件夹。在每个文件夹中放入一个简单的测试文件，比如index.html`，里面写上不同的内容，以便后续验证配置是否生效。
例如，在project1的index.html中写入“这是80端口的项目”，在project2中写入“这是8080端口的项目”，以此类推。
第三步：修改本地hosts文件
hosts文件的作用
hosts文件是一个用于将主机名映射到IP地址的系统文件。当我们访问一个域名时，操作系统会首先检查hosts文件，如果找到了对应的映射关系，就直接使用该IP地址，而不需要通过DNS服务器去查询。
在我们的配置中，需要将自定义域名local.test.com映射到本地回环地址127.0.0.1。这样，当我们访问local.test.com时，实际上就是在访问本机上的Apache服务。
修改hosts文件的具体方法
Windows系统的hosts文件路径是C:\Windows\System32\drivers\etc\hosts。由于这个文件受到系统保护，普通方式无法直接编辑。正确的做法是：
- 点击开始菜单，输入“记事本”
- 右键点击“记事本”，选择“以管理员身份运行”
- 在记事本中，点击“文件”->“打开”，导航到上述路径
- 注意要将文件类型从“文本文档(.txt)”改为“所有文件(.*)”，才能看到hosts文件
- 选中hosts文件并打开
在文件末尾添加一行：
127.0.0.1 local.test.com保存文件。如果提示没有权限，请确认是否真的以管理员身份运行了记事本。
刷新DNS缓存
修改完hosts文件后，为了让更改立即生效，建议刷新一下本地DNS缓存。打开命令提示符（同样需要以管理员身份运行），输入以下命令：
ipconfig /flushdns执行成功后，系统会提示“已成功刷新 DNS 解析缓存”。此时，你再访问local.test.com，系统就会直接使用hosts文件中的映射关系。
第四步：重启服务并验证
重启Apache服务
回到XAMPP控制面板，先点击Apache对应的“Stop”按钮停止服务，然后再点击“Start”按钮重新启动。如果一切正常，Apache的状态指示灯会变成绿色，表示服务启动成功。
如果在启动过程中出现红色错误提示，说明配置文件中可能存在语法错误。常见的错误包括：
- 端口号写错或者重复
- 路径中使用了反斜杠
- 尖括号不匹配
- 缺少必要的配置项
此时，可以打开XAMPP的控制台日志，查看具体的错误信息。也可以手动检查httpd.conf和httpd-vhosts.conf两个文件，逐行核对配置是否正确。
验证配置是否生效
打开浏览器，依次访问以下三个地址：
http://local.test.com：应该显示project1目录下的内容http://local.test.com:8080：应该显示project2目录下的内容http://local.test.com:8081：应该显示project3目录下的内容
如果每个地址都能正确显示对应的页面，说明配置成功了。如果某个地址无法访问，或者显示的内容不对，就需要检查对应的虚拟主机配置。
常见问题与解决方法
端口被占用导致Apache启动失败
这是最常见的问题之一。当你添加了新端口后，如果这些端口已经被其他程序占用，Apache就无法启动。可以使用以下命令检查端口占用情况：
netstat -ano | findstr "8080"这条命令会显示占用8080端口的进程ID。然后打开任务管理器，在“详细信息”选项卡中找到对应的PID，结束该进程即可。如果不想结束现有进程，可以更换一个未被占用的端口，然后重新修改httpd.conf和httpd-vhosts.conf中的端口配置。
访问域名提示403禁止访问
403错误通常是因为目录权限配置不正确。检查httpd-vhosts.conf中对应虚拟主机的<Directory>配置，确保包含Require all granted这一行。同时，确认DocumentRoot指定的目录路径与实际存在的目录完全一致，包括大小写和斜杠方向。
修改hosts文件后仍然无法访问
有时候修改完hosts文件后，浏览器可能还在使用旧的DNS缓存。除了前面提到的ipconfig /flushdns命令外，还可以尝试清除浏览器的DNS缓存。不同浏览器的方法略有不同，一般可以在开发者工具的网络面板中找到相关选项。最直接的方法是关闭浏览器重新打开，或者换一个浏览器试试。
配置文件语法检查
为了避免因配置错误导致Apache无法启动，可以在命令行中使用以下命令检查配置文件的语法：
C:\xampp\apache\bin\httpd.exe -t如果配置没有问题，会显示“Syntax OK”；如果有错误，会明确指出错误的位置和原因，方便你快速定位和修复。
总结
通过以上四个步骤，我们成功实现了在XAMPP中为一个域名配置多个端口的目标。整个过程虽然看起来步骤较多，但只要按照顺序一步步操作，其实并不复杂。这种配置方式在实际开发中非常实用，特别是当我们需要同时运行前后端分离的项目时，能够大大提高工作效率。
记住，配置的关键在于三点：一是让Apache监听多个端口，二是为每个端口配置对应的虚拟主机，三是通过hosts文件将域名指向本地。只要理解了这三个核心环节，以后遇到类似的配置需求，你也能举一反三，轻松应对。