Chrome下末尾带点域名触发CSP相关CORS错误求解决方案

以下方案可按优先级选择：

方案1：Web服务器层匹配Host头做永久跳转（推荐优先使用） #

直接从根源上将带末尾点的域名跳转到规范域名，彻底消除跨域判断不一致的问题。注意该配置不能写在.htaccess中，需要写在Web服务器的虚拟主机配置段：

• Nginx 配置示例
  在对应站点的server块中添加如下规则：

if ($host ~* ^(.+)\.$) {
    return 301 $scheme://$1$request_uri;
}

• Apache 配置示例
  在对应站点的VirtualHost段中添加如下规则，需提前启用mod_rewrite：

RewriteEngine On
RewriteCond %{HTTP_HOST} ^(.+)\.$
RewriteRule ^(.*)$ https://%1/$1 [L,R=301]

方案2：服务端CORS规则兼容带点域名 #

如果暂时无法做全局跳转，可以调整CORS响应头的判断逻辑，匹配Origin时自动忽略域名末尾的点：

# 后端处理伪代码示例
origin = request.headers.get('Origin')
if origin:
    # 移除Origin末尾的点做归一化判断
    normalized_origin = origin.rstrip('.')
    if normalized_origin in 允许跨域的域名列表:
        # 响应头返回原始带点的Origin，不要返回归一化后的地址
        response.headers['Access-Control-Allow-Origin'] = origin

同步调整Referrer Policy相关的域名校验逻辑，做相同的末尾点兼容处理即可。

方案3：前端临时兼容（仅应急使用） #

如果服务端暂时无法修改，可在页面入口处添加JS判断，主动跳转到规范域名：

if (location.host.endsWith('.')) {
    location.host = location.host.slice(0, -1);
}

该方案弊端是首屏加载完成后才会触发跳转，会有明显的闪烁感，仅作为临时应急方案使用。

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