记录使用Nginx后Giscus无法登录的问题

2026-01-07

[!INFO]

文章最后修改时间为2026年01月07日，请注意部分内容可能已改变。如有问题可在评论区提出哦~~~

问题描述

在本博客网站引入giscus评论后，在运行 npm run build 与 npm run preview 后能够正常显示评论区，但是使用nginx部署到服务器上后，在点击“使用GitHub登录”后，使用GitHub账号授权登录后，网址栏URL包含原来网址与 ?code=xxx&state=yyy ，但是刷新网页后登录状态未建立。

错误的nginx.conf文件内容如下

server { 
	listen 80; 
	listen [::]:80; 
	
	root /var/www/html; 
	index index.html; 
	
	location /{ 
		try_files $uri $uri/ / index.html; 
	} 
	location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { 
		expires 1y; add_header Cache-Control "public, immutable"; 
	} 
}

问题原因

Giscus登录失败的原因是Nginx的try_files指令在回退到index.html时没有传递原始URL的查询参数，导致GitHub OAuth回调中的认证参数在到达前端应用前就被丢弃，破坏了完整的认证流程。

location / {
    try_files $uri $uri/ /index.html;
}

在配置文件中的如上代码中，由于直接使用 /index.html ，当Giscus的GitHub OAuth回调URL（如http://yoursite.com/?code=xxx&state=yyy）到达时，Nginx只传递了路径而丢失了关键的认证参数。所以解决方法就是让这些参数得到传递。

解决方法

正确的nginx.conf文件内容如下

server { 
	listen 80; 
	listen [::]:80; 
	
	root /var/www/html; 
	index index.html; 
	
	location /{ 
		try_files $uri $uri/ / index.html$is_args$args; # 在这里添加$is_args$args
	} 
	location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { 
		expires 1y; add_header Cache-Control "public, immutable"; 
	} 
}

变量解释

$is_args : 如果有查询参数则值为"?"，否则为空。
$args : 包含所有查询参数字符串（如code=xxx&state=yyy）。

添加了之后使Giscus能够正确接收GitHub返回的认证参数，从而完成登录流程。