跨域POST请求中Client Hint Headers无法传递至API服务器问题

首先，你遇到的不是POST请求本身的问题，而是几个配置细节没做对，导致Client Hint头没被正确委托传递：

1. 修正delegate-ch的语法格式 #

你当前的meta标签里，Client Hint和域名之间用了空格，但正确的语法应该用等号连接。浏览器根本识别不了你原来的配置，这是核心问题。正确的写法应该是：

<meta
      http-equiv="delegate-ch"
      content="sec-ch-ua=http://api.foo.test; sec-ch-ua-model=http://api.foo.test; sec-ch-ua-platform=http://api.foo.test; sec-ch-ua-platform-version=http://api.foo.test; sec-ch-ua-mobile=http://api.foo.test"
/>

另外，域名可以省略协议（比如直接写api.foo.test），浏览器会自动匹配当前页面的协议。

2. 前端源站点必须返回Accept-Ch响应头 #

别忽略这一步：你的前端应用所在的域名（比如foo.test），必须在自己的页面响应头里返回Accept-Ch，声明需要这些Client Hint。浏览器只会委托源站点已经请求过的Hint，否则不会主动传递。示例响应头：

Accept-Ch: sec-ch-ua, sec-ch-ua-model, sec-ch-ua-platform, sec-ch-ua-platform-version, sec-ch-ua-mobile

3. 确保跨域请求的CORS配置正确 #

API服务器的OPTIONS预请求和实际请求需要满足两个条件：

• 在Access-Control-Allow-Headers中包含所有你要传递的Client Hint头，示例：

  Access-Control-Allow-Headers: Sec-CH-UA, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA-Mobile
  

• 如果你的请求需要携带凭证（比如Cookie），前端请求要设置credentials: 'include'（fetch/axios都支持这个配置）；如果不需要，也要确保API服务器的Access-Control-Allow-Credentials设置正确（不需要的话可以设为false，但建议根据实际情况调整）。

4. 不要在delegate-ch里添加路径 #

delegate-ch只能指定目标域名，不能加/graphql这类路径，之前的尝试是无效的，直接写完整域名即可。

额外验证步骤 #

• 打开Chrome开发者工具的「Network」面板，查看前端页面的响应头，确认Accept-Ch存在；
• 查看POST请求的「Request Headers」，检查是否包含那些Sec-CH-*头；
• 查看OPTIONS预请求的响应头，确认CORS相关配置都符合要求。

按照这些步骤调整后，Chrome 116应该能正常在跨域POST请求中传递Client Hint头了。

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