跨域问题的解决

发布于 2021-12-10  82 次阅读


问题描述

今天为博客更换了新的主题——butterfly,在配置评论组件Twikoo时遇到问题。

本地预览无误,部署至服务器后,出现了评论区加载不出来的情况。控制台报错

No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题解决

在网上搜索一番后,了解到这是跨域问题,较为简单的解决方法,是配置nginx,加上特定请求头来解决。于是按照教程操作之,为server配置了以下内容:

add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
}

但是,问题却并没有解决。想到我使用了腾讯云的CDN服务,自然开始怀疑,是否是CDN配置有什么差错。在仔细阅读官方文档后,我又对CDN的HTTP响应头进行了配置。不出意料,依然没有解决问题。即便是关闭CDN,直接解析到服务器访问,Twikoo也没有任何要出现的意思。

虽然以前用Keep主题时,Twikoo工作情况良好,这时我却不得不怀疑起它的配置。果不其然,它所使用的腾讯云开发环境中,有一个WEB安全域名的选项,当我看到以前使用的gitee域名在其中的时候,我知道问题迎刃而解了。最后我将现在用的域名加了进去,评论终于能够正常使用了。