Ollama项目中CORS跨域请求头问题的分析与解决

背景介绍

在Web开发中，当使用JavaScript在浏览器端向不同域名的服务器发起请求时，经常会遇到跨域资源共享(CORS)问题。最近在Ollama项目中，开发者在使用OpenAI npm包与本地Ollama实例交互时，遇到了一个典型的CORS问题。

问题现象

开发者在使用OpenAI客户端库向本地运行的Ollama服务(地址为127.0.0.1:11434)发起请求时，浏览器控制台报错显示：

Access to fetch at 'http://127.0.0.1:11434/v1/chat/completions' from origin 'http://localhost:5174' has been blocked by CORS policy: Request header field x-stainless-timeout is not allowed by Access-Control-Allow-Headers in preflight response.

技术分析

这个问题源于以下几个技术点：

1. CORS预检请求：当浏览器检测到跨域请求包含非简单请求头时，会先发送一个OPTIONS方法的预检请求，询问服务器是否允许实际请求。

2. x-stainless-timeout头：OpenAI客户端库在某个版本更新中新增了这个自定义请求头，用于设置请求超时时间。

3. 服务器配置：Ollama服务默认没有在Access-Control-Allow-Headers响应头中包含x-stainless-timeout，导致预检请求失败。

解决方案

Ollama项目团队已经通过提交修复了这个问题。修复的核心思路是：

1. 在服务器端更新CORS配置，将x-stainless-timeout头添加到允许的请求头列表中。

2. 确保预检请求能够正确处理这个自定义头。

开发者应对建议

对于遇到类似问题的开发者，可以采取以下措施：

1. 检查请求头：确认哪些自定义头可能触发CORS预检。

2. 服务器配置：确保服务器正确配置了Access-Control-Allow-Headers响应头，包含所有需要的自定义头。

3. 客户端调整：如果无法修改服务器配置，可以考虑在客户端移除不必要的自定义头。

总结

这个案例展示了现代Web开发中常见的跨域问题，特别是在使用第三方库与本地服务交互时。理解CORS机制和预检请求的工作原理，对于解决这类问题至关重要。Ollama项目团队快速响应并修复了这个问题，为开发者提供了更好的使用体验。