第三方域名跳转至自有域名并保留原URL的标准方案问询

针对你遇到的证书异常、请求头部问题以及移动端CSS媒体查询失效的情况，以下是经过验证的标准实现步骤：

一、Constellix DNS配置 #

• 给第三方客户的域名添加CNAME记录，指向你的Cloudflare Pages项目域名（可以是默认的xxx.pages.dev，也可以是你已绑定的自定义域名）。不要用A记录，Cloudflare Pages的源IP会动态变化，CNAME更稳定可靠。
• 确保Constellix开启DNSSEC（如果你的Cloudflare域名也开启了DNSSEC，保持配置一致），避免解析失败或安全告警。

二、Cloudflare Pages域名绑定与SSL证书处理 #

• 登录Cloudflare后台，进入你的Pages项目，在「自定义域」菜单添加第三方客户的域名。
• 等待Cloudflare自动验证DNS记录（通常几分钟），验证通过后，将SSL/TLS加密模式设置为完全（严格）。Cloudflare会自动为该第三方域名颁发免费的SSL证书，彻底解决证书不匹配的问题。
• 开启「始终使用HTTPS」功能，但不要额外添加页面规则强制跳转——Cloudflare原生的HTTPS重定向会在边缘层处理，不会产生额外的3xx跳转请求。

三、用边缘代理转发替代框架重定向（解决CSS媒体查询异常） #

之前用框架重定向导致移动端CSS异常，核心原因是客户端跳转会重新加载页面，干扰viewport识别和媒体查询生效。改用Cloudflare Pages的边缘代理转发即可解决：

1. 在你的Pages项目根目录创建_redirects文件，添加以下规则：

/* https://client-domain.com/:splat 200!

这里的200!表示代理转发（而非3xx跳转），所有请求会在Cloudflare边缘层直接转发到你的项目，用户浏览器的URL始终保持为第三方域名，不会触发客户端页面刷新，媒体查询自然能正常工作。
2. 确保项目内的资源引用（CSS、JS、图片等）全部使用相对路径，避免硬编码成你的域名，例如：

<link rel="stylesheet" href="/css/mobile.css">

不要写成绝对路径指向你的域名，否则会出现跨域或资源加载异常。

四、请求头部配置（解决头部异常问题） #

在Pages项目根目录创建_headers文件，添加必要的头部规则，确保请求正常处理：

/*
  Access-Control-Allow-Origin: *
  X-Frame-Options: SAMEORIGIN
  Content-Security-Policy: default-src 'self' client-domain.com; style-src 'self' 'unsafe-inline';

• Content-Security-Policy要包含第三方域名，避免资源被浏览器拦截；
• Cloudflare默认会保留请求的Host头部，无需额外配置，如果遇到头部丢失的情况，可以用边缘函数补充：

export async function onRequest(context) {
  const response = await context.next();
  response.headers.set('Host', context.request.headers.get('Host'));
  return response;
}

五、验证测试 #

• 访问第三方域名，确认URL未发生跳转，地址栏显示HTTPS锁标；
• 用浏览器开发者工具切换移动端模拟器，检查页面布局是否适配（媒体查询生效）；
• 用curl -I https://client-domain.com命令查看响应头，确认状态码为200，无多余的3xx跳转记录。

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