Ollama项目中CORS跨域问题的分析与解决方案

背景介绍

Ollama作为一个本地运行的AI模型服务，经常需要与前端应用进行交互。在开发过程中，开发者使用OpenAI官方npm包访问本地Ollama服务时，遇到了典型的跨域资源共享(CORS)问题。这个问题特别出现在添加了自定义请求头的情况下。

问题现象

当开发者通过浏览器前端应用向本地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.

这个错误表明，浏览器在发送实际请求前先发送了一个预检请求(OPTIONS)，但Ollama服务没有明确允许x-stainless-timeout这个自定义请求头。

技术原理

1. CORS机制：浏览器出于安全考虑，会限制跨域请求。当请求满足某些条件时(如使用非简单请求头)，浏览器会先发送预检请求。

2. 预检请求：浏览器通过OPTIONS方法询问服务器是否允许实际请求的源、方法和头信息。服务器需要通过响应头明确声明允许的内容。

3. 自定义请求头：OpenAI客户端库添加了x-stainless-timeout头用于超时控制，这触发了浏览器的预检机制。

解决方案

Ollama项目团队已经通过代码更新解决了这个问题。解决方案的核心是：

1. 在服务端正确配置CORS策略，明确允许x-stainless-timeout自定义头。

2. 确保OPTIONS预检请求能够返回包含以下关键头的响应：

   • Access-Control-Allow-Headers: 包含x-stainless-timeout
   • Access-Control-Allow-Methods: 允许的HTTP方法
   • Access-Control-Allow-Origin: 允许的请求来源

开发者应对建议

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

1. 检查服务端CORS配置：确保服务端正确处理OPTIONS请求，并返回适当的CORS头。

2. 自定义头管理：如果必须使用自定义头，应在服务端明确声明允许这些头。

3. 开发环境配置：在本地开发时，可以考虑使用开发服务器或浏览器插件临时绕过CORS限制，但生产环境必须正确配置。

4. 客户端库选择：了解所使用的客户端库是否会添加自定义头，必要时可以fork修改或选择替代方案。

总结