
Halo 插件 Umami 跨域报错解解决方案
在配置 halo 博客 PluginUmami 插件时,会遇到报错信息,拒绝链接(如图)。
查看控制台报错信息如下:
Refused to frame 'https://umami.waistu.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' undefined".
Understand this erro
主要为浏览器的 内容安全策略(Content Security Policy, CSP) 相关,通常出现在尝试将某个网页嵌入到 iframe、frame 或 object 等框架元素中时。
解决思路
查阅插件文档,给出的解决方案加入相关 Nginx 配置:
server{
listen 443 ssl http2;
server_name [umami.domain.com];
#...
add_header Access-Control-Allow-Origin 'https://halo.domain.com';
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
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';
if ($request_method = 'OPTIONS') {
return 204;
}
add_header Content-Security-Policy 'frame-ancestors halo.domain.com';
location / {
#...
proxy_hide_header 'Access-Control-Allow-Origin';
proxy_hide_header 'Content-Security-Policy';
}
}
根据插件文档,对 Nginx 配置文件进行修改,这里以 1Panel 面板为例,在 Nginx 配置文件添加下方内容,并将 waistu 更换为你的域名,支持当前泛域名所有请求,即可解决问题。
[!NOTE] 2025年7月修改
原内容可以解决在 Halo 后台正确加载 Umami 页面,但控制台还是会存在 /api/send 报错信息,重新优化下配置:修复正则表达式、移除部分冲突的配置等内容。
# 跨域配置优化
set $cors_origin "";
if ($http_origin ~* "^https://.*\.waistu\.com$") {
set $cors_origin $http_origin;
}
# 允许带凭证的跨域请求,动态设置允许的域名
add_header Access-Control-Allow-Origin $cors_origin always;
add_header Access-Control-Allow-Credentials 'true' always;
# 合并重复的头信息,避免冲突
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
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, Token' always;
add_header Access-Control-Max-Age 86400 always;
# 内容安全策略,防止iframe嵌入攻击
add_header Content-Security-Policy "frame-ancestors 'self' https://*.waistu.com" always;
# 规范化隐藏上游响应头
proxy_hide_header Access-Control-Allow-Origin;
proxy_hide_header Content-Security-Policy;
# 预检请求快速响应
if ($request_method = 'OPTIONS') {
return 204;
}
添加位置如图,并修改域名为实际 Halo 博客地址后,保存并重载 Nginx 配置文件即可。、
最终效果
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 二歪同学
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果