XAMPP如何绑定域名，让本地项目用域名访问？

在本地开发环境中，使用XAMPP集成包进行Web项目开发是许多开发者的首选，我们通过在浏览器中输入 localhost/项目文件夹名 或 0.0.1/项目文件夹名 来访问项目，这种方式存在一些不便，例如无法完美模拟真实域名的环境、Cookie和Session的域名限制问题等，为了解决这些问题，将本地项目与一个自定义的域名进行绑定，就显得尤为重要，本文将详细介绍如何在XAMPP环境中实现本地域名绑定,让你的开发体验更接近生产环境。

为何要进行本地域名绑定？

将本地项目绑定到一个自定义的域名（如 myproject.test）能带来诸多好处，它极大地提升了开发的真实感，你可以像访问一个真实网站一样访问本地项目，这对于处理基于域名的逻辑（如多站点、子域名路由）至关重要，它解决了跨域和Cookie/Session的域名限制问题，许多Web应用会设置Cookie的域名属性，使用 localhost 可能导致Cookie无法正确设置或读取，而使用自定义域名则能完美模拟线上行为，它让项目地址更加简洁、专业，便于记忆和管理,尤其是在同时开发多个项目时。

核心原理简述

本地域名绑定的核心原理主要涉及两个关键文件的配置：操作系统的 hosts 文件和Apache的虚拟主机配置文件。

1. hosts 文件：这是一个位于本地操作系统中的文本文件，用于将主机名映射到IP地址，当我们修改这个文件，添加一条记录将我们的自定义域名指向本地IP地址（0.0.1）后，系统在访问该域名时，就不会向公共DNS服务器请求解析,而是直接访问本地服务器。
2. Apache虚拟主机（Virtual Hosts）：Apache服务器通过虚拟主机功能，可以在同一个服务器上运行多个网站或Web应用，我们需要配置Apache，告诉它当接收到指向特定域名的请求时，应该去哪个目录（即我们的项目文件夹）寻找文件。

通过这两个步骤的配合，就实现了在浏览器中输入自定义域名,准确无误地访问到本地指定项目的效果。

为了更清晰地展示,下表小编总结了两个核心文件的作用：

详细操作步骤

假设我们的XAMPP安装在 D:xampp 目录，项目文件夹位于 D:xampphtdocsmyproject，我们希望将域名 myproject.test 绑定到这个项目。

第一步：修改 hosts 文件

1. 使用管理员权限打开记事本或其他文本编辑器，这是关键，因为普通权限无法保存 hosts 文件，可以在开始菜单搜索“记事本”，右键点击并选择“以管理员身份运行”。
2. 在记事本中，通过“文件” -> “打开”，浏览到 C:WindowsSystem32driversetc 目录。
3. 在文件类型下拉菜单中选择“所有文件(*.*)”，然后选中并打开 hosts 文件。
4. 在文件末尾添加一行：

   0.0.1 myproject.test

5. 保存文件并关闭，操作系统已经知道 myproject.test 指向本地了。

第二步：启用Apache虚拟主机模块

XAMPP默认可能未启用虚拟主机配置,我们需要手动开启。

1. 打开XAMPP控制面板，点击Apache旁边的 Config 按钮，选择 Apache (httpd.conf)。
2. 在打开的配置文件中，使用查找功能（Ctrl + F）搜索以下两行代码：

   #LoadModule vhost_alias_module modules/mod_vhost_alias.so
   #Include conf/extra/httpd-vhosts.conf

3. 将这两行代码前面的 号删除，使其变为：

   LoadModule vhost_alias_module modules/mod_vhost_alias.so
   Include conf/extra/httpd-vhosts.conf

4. 保存文件，这一步启用了虚拟主机模块,并告诉Apache加载虚拟主机的具体配置文件。

第三步：配置虚拟主机

这是最核心的一步,我们将在这里定义域名与项目目录的对应关系。

1. 再次在XAMPP控制面板的Apache Config 菜单中，选择 Apache (httpd-vhosts.conf)。

2. 文件打开后，通常会有一段示例代码，为了保持整洁，我们可以在文件末尾添加自己的配置，建议保留默认的 localhost 配置，以免 http://localhost 或 http://127.0.0.1/dashboard/ 无法访问。

3. 在文件末尾添加以下代码块：

   # 保留默认的localhost配置
   <VirtualHost *:80>
       DocumentRoot "D:/xampp/htdocs"
       ServerName localhost
   </VirtualHost>
   # 我们的新项目配置
   <VirtualHost *:80>
       # 项目所在的文件夹路径
       DocumentRoot "D:/xampp/htdocs/myproject"
       # 绑定的域名
       ServerName myproject.test
       # 设置目录访问权限
       <Directory "D:/xampp/htdocs/myproject">
           Options Indexes FollowSymLinks
           AllowOverride All
           Require all granted
       </Directory>
   </VirtualHost>

   代码解释：

   • <VirtualHost *:80> 定义一个监听80端口的虚拟主机。
   • DocumentRoot 指定了该域名对应的网站根目录。
   • ServerName 指定了绑定的域名。
   • <Directory> 块用于设置目录的访问权限，Require all granted 允许所有请求访问该目录，这是避免出现403 Forbidden错误的关键。

4. 保存并关闭 httpd-vhosts.conf 文件。

   

第四步：重启并验证

1. 回到XAMPP控制面板，点击Apache旁边的 Stop 按钮，然后再点击 Start 按钮,重启Apache服务以使所有配置生效。
2. 打开浏览器，在地址栏输入 http://myproject.test 并回车。
3. 如果一切顺利，你应该能看到你的 myproject 项目首页内容，如果出现错误，请检查上述步骤中的路径、域名拼写以及权限配置是否正确。

验证与常见问题排查

如果在访问时遇到问题,可以按以下思路排查：

• 页面无法显示（无连接）：检查 hosts 文件是否正确保存，路径是否正确，可以尝试在命令提示符（CMD）中执行 ping myproject.test，看是否能解析到 0.0.1。
• 403 Forbidden：这通常是权限问题，请检查 httpd-vhosts.conf 文件中的 <Directory> 配置，确保 Require all granted 已添加,并且路径正确无误。
• 404 Not Found：这表示Apache已接收到请求，但找不到文件，请检查 DocumentRoot 的路径是否准确指向了你的项目文件夹。
• Apache无法启动：这很可能是 httpd-vhosts.conf 文件中的语法错误，可以打开XAMPP控制面板点击Apache旁边的 Logs -> error.log 查看具体的错误信息。

相关问答FAQs

为什么推荐使用 .test 作为本地开发域名后缀，而不是 .com 或 .dev？

解答：使用 .test 后缀是业界推荐的最佳实践，根据互联网号码分配机构（IANA）的规定，.test、.example、.invalid 和 .localhost 等顶级域名是专门保留用于文档和测试的，使用它们可以确保你的本地开发域名永远不会与一个真实的、公开的互联网域名冲突，如果使用 .com 或 .dev，你可能会意外地访问到一个真实存在的网站，或者在项目部署时产生混淆,甚至可能带来一些安全风险。

我已经按照步骤配置了多个项目，但为什么访问不同的域名都指向了同一个项目？

解答：这个问题通常是由于 httpd-vhosts.conf 文件中的配置导致的，Apache在处理请求时，会使用第一个匹配的 VirtualHost 配置作为默认配置,请检查以下几点：

1. ServerName 唯一性：确保每个 <VirtualHost> 块中的 ServerName 都是唯一的,并且与你想要访问的域名完全一致。
2. DocumentRoot 路径：仔细核对每个 <VirtualHost> 块中的 DocumentRoot 路径，确保它们分别指向了正确的项目文件夹,路径错误是最常见的原因。
3. 默认虚拟主机：检查文件开头是否有一个没有指定 ServerName 或 ServerName 为 的默认虚拟主机配置，如果存在，它可能会捕获所有未明确匹配的请求，确保你的每个项目都有明确的 ServerName 配置。