如何为<a>标签添加子域名，生成带学校子域的课程链接？

我来分享几个靠谱的实现思路，刚好之前做过类似的子域名路由场景，应该能帮到你：

前端纯JavaScript动态生成方案 #

如果你的通用着陆页是静态页面或者单页应用（SPA），可以用JS动态拼接子域名URL，不需要后端介入：

首先在页面里给每个课程链接标记好对应的学校标识和课程路径，比如用data-*属性：

<!-- 着陆页上的课程链接模板 -->
<a href="#" class="school-course" data-school="school1" data-course="courses/algebra">代数课程</a>
<a href="#" class="school-course" data-school="school2" data-course="courses/chemistry">化学课程</a>

然后写一段JS来处理点击事件，动态拼接并跳转：

// 提取基础域名（也可以直接硬编码，避免环境差异）
const baseDomain = 'project.domain.nl';

// 给所有课程链接绑定点击逻辑
document.querySelectorAll('.school-course').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    // 获取学校子域名和课程路径
    const subdomain = link.dataset.school;
    const coursePath = link.dataset.course;
    // 拼接完整URL
    const targetUrl = `https://${subdomain}.${baseDomain}/${coursePath}`;
    // 跳转到目标页面
    window.location.href = targetUrl;
  });
});

这种方案好处是快速实现，不需要后端修改，适合静态站点。

后端渲染生成链接方案 #

如果你的着陆页是后端渲染的（比如用Express、PHP、Django等框架），可以在渲染页面时直接生成带正确子域名的链接，更安全也更灵活：

以Node.js Express + EJS模板为例：

1. 后端路由里准备学校和课程数据，定义URL生成函数：

app.get('/', (req, res) => {
  // 模拟学校和课程数据
  const schoolList = [
    { subdomain: 'school1', name: '阳光中学', courses: [{ name: '数学', path: 'courses/math' }] },
    { subdomain: 'school2', name: '星辰中学', courses: [{ name: '物理', path: 'courses/physics' }] }
  ];

  // 定义生成子域名URL的工具函数
  const getSchoolCourseUrl = (subdomain, path) => {
    return `https://${subdomain}.project.domain.nl/${path}`;
  };

  // 渲染页面时传入数据和工具函数
  res.render('landing', { schools: schoolList, getSchoolCourseUrl });
});

2. 在EJS模板里直接调用函数生成链接：

<% schools.forEach(school => { %>
  <div class="school-section">
    <h3><%= school.name %>的课程</h3>
    <ul>
      <% school.courses.forEach(course => { %>
        <li>
          <a href="<%= getSchoolCourseUrl(school.subdomain, course.path) %>">
            <%= course.name %>
          </a>
        </li>
      <% }) %>
    </ul>
  </div>
<% }) %>

这种方案适合需要动态数据的场景，比如根据用户权限显示不同学校的课程，或者从数据库读取学校信息。

服务器配置辅助（确保子域名可访问） #

不管用哪种方案，都需要先确保所有子域名school*.project.domain.nl都指向你的应用服务器。比如用Nginx做反向代理的配置：

server {
  listen 80;
  listen 443 ssl;
  server_name project.domain.nl *.project.domain.nl;

  # SSL证书配置（如果用HTTPS）
  ssl_certificate /path/to/your/cert.pem;
  ssl_certificate_key /path/to/your/key.pem;

  # 转发请求到应用服务器
  location / {
    proxy_pass http://your-app-internal-addr:port;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
  }
}

另外要注意跨域问题：如果子域名和主域名需要共享Cookie（比如用户登录状态），要在设置Cookie时指定domain=.project.domain.nl，这样所有子域名都能读取到Cookie。

内容的提问来源于stack exchange，提问作者Paul Sinnema