ArtalkJS跨域请求问题分析与解决方案

问题背景

ArtalkJS是一款现代化的评论系统，在2.8.0版本更新后，部分用户遇到了跨域请求(CORS)问题。主要表现为前端请求无法正常发送到后端API，浏览器控制台显示跨域错误。

问题分析

经过深入调查，发现该问题主要源于以下两个方面的变更：

1. HTTP请求头变更：ArtalkJS 2.8.0版本开始，默认配置了referrerPolicy: 'no-referrer'，这意味着前端请求将不再携带Referer请求头。

2. 安全策略调整：虽然不再强制检查Origin和Referer头部，但仍然保留了CORS源检查机制，要求后端配置可信域名。

典型场景

在实际使用中，特别是通过CDN加速的网站环境中，这个问题会表现得尤为明显：

1. 当网站配置了CDN防盗链功能，通常会检查HTTP请求的Referer头
2. ArtalkJS 2.8.0+的请求不携带Referer头
3. CDN服务器因缺少Referer头而直接返回403 Forbidden
4. 前端无法获取API响应，表现为跨域错误

解决方案

针对这一问题，我们提供以下几种解决方案：

方案一：调整CDN配置

1. 在CDN管理界面中，为ArtalkJS的API路径(/api)设置不缓存规则
2. 或者完全禁用防盗链功能（安全性较低）

方案二：修改Nginx配置

对于自建服务器的用户，可以在Nginx配置中添加以下规则：

location /api {
    proxy_pass http://localhost:23366;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 允许空Referer
    set $cors "";
    if ($http_origin ~* (.*)) {
        set $cors "true";
    }
    if ($cors = "true") {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
    }
}

方案三：更新ArtalkJS配置

1. 确保后端配置文件中正确设置了trusted_domains
2. 或者在ArtalkJS管理界面中添加站点URL

最佳实践建议

1. 分路径设置CDN规则：为静态资源(如图片)和API路径设置不同的CDN策略
2. 精细化防盗链：只为真正需要保护的路径启用防盗链
3. 保持版本更新：及时关注ArtalkJS的版本更新日志，了解安全策略变更

总结

ArtalkJS 2.8.0版本的这一变更主要是为了提升安全性，虽然短期内可能造成一些兼容性问题，但从长远来看有利于构建更安全的评论系统。开发者在使用时应注意检查CDN和服务器配置，确保与新的安全策略兼容。