Slidev项目在GitLab Pages部署时的CORS问题解决方案

在使用Slidev框架构建演示文稿并部署到GitLab Pages时，开发者可能会遇到跨域资源共享(CORS)错误。这个问题通常表现为浏览器控制台中出现"Cross-Origin Request Blocked"警告，导致页面功能无法正常使用。

问题现象

当Slidev项目部署到GitLab Pages且未启用"唯一域名"选项时，浏览器会报告CORS错误。具体表现为OAuth授权请求被阻止，错误信息显示缺少'Access-Control-Allow-Origin'头部。这种情况会导致身份验证流程中断，影响演示文稿的正常功能。

问题根源

这个问题的根本原因在于GitLab Pages的默认部署方式与Slidev/Vite应用的预期行为不匹配。当禁用"唯一域名"选项时，GitLab Pages会将项目部署到子路径下（如username.gitlab.io/project-name/），而Slidev应用默认配置可能无法正确处理这种部署结构。

解决方案

要解决这个问题，开发者需要正确配置Slidev/Vite的基础路径(base path)。以下是两种配置方法：

1. 通过Slidev配置

在Slidev项目中，可以通过设置基础路径来适配GitLab Pages的子路径部署方式。这需要在项目配置中明确指定部署的基础路径。

2. 通过Vite配置

对于直接使用Vite的项目，可以在vite.config.js文件中添加base配置项，将其设置为相对路径'./'。这种配置方式确保所有资源请求都会基于当前路径解析，避免了跨域问题。

实施步骤

1. 检查GitLab Pages设置，确认是否禁用了"唯一域名"选项
2. 根据项目构建方式选择上述配置方法之一
3. 重新构建并部署项目
4. 验证部署后的页面功能是否正常

注意事项

• 确保配置更改后重新构建项目
• 不同版本的Slidev/Vite可能有细微的配置差异
• 测试时清除浏览器缓存以避免缓存干扰

通过正确配置基础路径，开发者可以确保Slidev项目在各种GitLab Pages部署场景下都能正常工作，避免CORS相关问题。