Directus项目中的CORS与搜索引擎爬虫问题解析

问题背景

在使用Next.js和Directus构建的博客项目中，开发者遇到了一个特殊的技术问题：Google搜索控制台(GSC)报告页面出现"Soft 404"错误，同时控制台显示CORS预检请求失败。表面上看是CORS配置问题，但实际原因却与搜索引擎爬虫的访问权限有关。

技术现象分析

当Google爬虫尝试访问页面时，浏览器控制台会显示如下错误：

Access to fetch at '[url]/items/recipe_categories?...' has been blocked by CORS policy...
Response to preflight request doesn't pass access control check...

开发者最初检查了Directus的CORS配置：

CORS_ENABLED: true
CORS_ORIGIN: true

并尝试添加了OPTIONS方法：

CORS_METHODS=GET,POST,PATCH,DELETE,OPTIONS

虽然Postman测试显示CORS头信息正确返回，但Google搜索控制台的问题依然存在。

问题根源

经过深入排查，发现问题的真正根源在于Directus默认的robots.txt配置中包含：

Disallow: /

这一配置阻止了所有搜索引擎爬虫访问网站内容，包括Google爬虫对API端点的访问尝试。当爬虫被阻止访问必要的API数据时，页面无法正常渲染，导致Google搜索控制台将其误判为CORS问题并报告"Soft 404"错误。

解决方案

针对这一问题，开发者提供了两种解决方案：

1. 精细控制爬虫访问权限： 在robots.txt中明确允许爬虫访问必要的API端点，例如：

   User-agent: *
   Allow: /items/recipe_categories
   Disallow: /admin/
   

2. 完全开放爬虫访问（仅适用于完全公开的内容）：

   User-agent: *
   Allow: /
   

安全注意事项

对于包含GraphQL端点的项目，需要特别注意：

• GraphQL端点通常不应被搜索引擎索引
• 开放爬虫访问权限前，需确认不会泄露敏感数据
• 对于管理后台等敏感区域，应保持Disallow设置

最佳实践建议

1. 针对内容型网站，建议采用第一种方案，精细控制爬虫访问权限
2. 定期检查Google搜索控制台报告，及时发现类似问题
3. 对于API端点，考虑实现服务端渲染(SSR)来避免爬虫直接调用API
4. 在开发阶段，可使用Google的"URL检查工具"模拟爬虫行为进行测试

总结

这个案例展示了Web开发中一个典型的问题：表面现象(CORS错误)掩盖了真正的底层原因(爬虫访问限制)。开发者在解决类似问题时，需要具备系统性的排查思路，不仅要检查明显的配置项，还要考虑整个请求链路中可能存在的各种限制因素。通过正确配置robots.txt和CORS策略，可以确保搜索引擎能够正确抓取和索引网站内容，同时保护敏感数据和功能不被公开访问。