解决 halo umami plugin CORS&CSP 跨域报错问题

现象

未按照该插件项目 README 配置前，后台有：
Refused to frame 'https://umami.howiehz.top/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
按照该插件项目 README 配置后，博客页面有：
No 'Access-Control-Allow-Origin' header is present on the requested resource

初步尝试

halo的umami插件的功能有一个是把统计界面嵌入后台管理页面
我在配置完成插件后，进入对应界面
出现报错Refused to frame 'https://umami.howiehz.top/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

于是按照该插件项目 README 文档中在 Console 无法加载 Umami 的页面，出现了 CORS 和 CSP 的错误。的解决办法，尝试修改了 Nginx 配置

map $http_origin $corsHost {
    default 0; 
    ~https://howiehz.top https://howiehz.top; 
    #...
}
server {
    listen 443 ssl http2 ; 
    listen [::]:443 ssl http2 ; 
    server_name umami.howiehz.top; 
    #...
    add_header Access-Control-Allow-Origin $corsHost; 
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; 
    add_header Access-Control-Allow-Credentials true; 
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Origin,token,Accept,type,payload'; 
    if ($request_method = 'OPTIONS' ) {
        return 204; 
    }
    add_header Content-Security-Policy 'frame-ancestors howiehz.top'; 
    
    location ^~ / {
    proxy_hide_header 'Access-Control-Allow-Origin'; 
    proxy_hide_header 'Content-Security-Policy'; 
    proxy_hide_header 'Access-Control-Allow-Methods'; 
    proxy_hide_header 'Access-Control-Allow-Credentials'; 
    proxy_hide_header 'Access-Control-Allow-Headers'; 
    proxy_pass http://192.168.256.256:3000; 
    #...
    }
}

CSP 问题解决了，后台可以正常嵌入 Umami 统计页面了
但是出现了一堆 CROS 错误，Umami 也无法正常跟踪

初步解决

既然是跨域问题，要求协议，端口，域名都一致
那就在 Nginx 把 https://howiehz.top/api/ 反代到 https://umami.howiehz.top/api/
的确解决了查询 API 产生的 CROS 问题
但是 Umami 自动生成的跟踪脚本内依然使用的是https://umami.howiehz.top/api/，
问题并未完全解决
现在会产生类似 Failed to load https://xxxxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://aaaaa' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 的报错

忽略也是一种解决方法

经过检索 no-cors 相关内容，得知，发送统计信息是没有问题的，
只是不能从 https://umami.howiehz.top/api/ 获取
所以虽然报错，但是不影响正常功能，
实际上 Umami 服务也在正常统计验证了这一点

最后的解决方法

先引用一条动态

被 halo-sigs/plugin-umami 的文档搞麻了，
搞了一堆 cors 相关配置，但是还是 cors 报错。
问了一圈其他的站长，都说啥都不用配置，直接用，就没啥 cors 问题。
于是我去 nginx 照着上面项目 readme 设置的都删掉，就留 1panel 自动生成的配置。
你猜怎么着，都好了，哈哈哈
#杂记 #网站建设 #难蚌

删掉按照项目 README 添加的配置，
没了 CORS 问题，但是 CSP 问题又出现了

经过测试其实只要加一句就可以解决 CSP 问题，也不会引入 CORS 问题
那些 add_header 加了反而有问题

server {
    #...
    location ^~ / {
    proxy_hide_header 'Content-Security-Policy';
    #....
    }
}