lobehub / lobe-chat

🤯 Lobe Chat - an open-source, modern-design AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Ollama / Azure / DeepSeek), Knowledge Base (file upload / knowledge management / RAG ), Multi-Modals (Vision/TTS) and plugin system. One-click FREE deployment of your private ChatGPT/ Claude application.
https://chat-preview.lobehub.com
Other
40.73k stars 9.27k forks source link

[Bug] 上传小写后缀图片(如.jpg, .png)报CORS错误。 #3801

Open zylinzzz opened 1 week ago

zylinzzz commented 1 week ago

📦 Environment

Docker

📌 Version

V1.15.18

💻 Operating System

Other Linux

🌐 Browser

Chrome

🐛 Bug Description

上传图片时报错:File upload failed. Please check your network connection and ensure that the file storage service's cross-origin configuration is correct.

image

只有图片名的后缀是小写如.jpg, .png的时候会出现这种错误,而.JPG, .PNG等大写后缀文件则可以正常上传并chunk。其他格式如.pdf, .doc等小写后缀文件则无报错出现。

使用docker compose部署的database版本,s3储存为MINIO。服务端部署在debian12上,客户端为macos。

📷 Recurrence Steps

上传小写后缀图片稳定复现。

🚦 Expected Behavior

可正常上传相关图片。

📝 Additional Information

No response

lobehubbot commented 1 week ago

👀 @zylinzzz

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.\ 非常感谢您提交 issue。我们会尽快调查此事,并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

dosubot[bot] commented 1 week ago

@zylinzzz 你好!我是Dosu,我是一个可以帮助您解决软件问题,回答问题,并成为贡献者的机器人。我在这里帮助您解决问题,同时等待人类维护者的到来。

I found a similar unsolved discussion that might be related to your issue: [Bug] 上传文件报错,已经对接cloudflareR2存储 [1].

Regarding your specific issue with CORS errors when uploading images with lowercase extensions (e.g., .jpg, .png), while uppercase extensions (e.g., .JPG, .PNG) work fine, it seems like the CORS configuration might not be handling case sensitivity correctly.

In the lobe-chat codebase, the file upload logic converts filenames to lowercase before determining the file type to ensure case insensitivity. This is done in the partitionContent method of the ChunkingLoader class:

partitionContent = async (filename: string, content: Uint8Array) => {
  // ...
  const type = this.getType(filename?.toLowerCase());
  // ...
};

private getType = (filename: string): LangChainLoaderType | undefined => {
  if (filename.endsWith('pptx')) {
    return 'ppt';
  }

  if (filename.endsWith('docx') || filename.endsWith('doc')) {
    return 'doc';
  }

  if (filename.endsWith('pdf')) {
    return 'pdf';
  }

  if (filename.endsWith('tex')) {
    return 'latex';
  }

  if (filename.endsWith('md') || filename.endsWith('mdx')) {
    return 'markdown';
  }

  const ext = filename.split('.').pop();

  if (ext && SupportedTextSplitterLanguages.includes(ext as SupportedTextSplitterLanguage)) {
    return 'code';
  }

  if (ext && LANGCHAIN_SUPPORT_TEXT_LIST.includes(ext)) return 'text';
};

Ensure that your CORS configuration in the Docker Compose setup for MinIO is correctly set. The relevant part of the Docker Compose configuration should look like this:

minio:
    image: minio/minio
    container_name: lobe-minio
    ports:
      - '9000:9000'
      - '9001:9001'
    volumes:
      - './s3_data:/etc/minio/data'
    environment:
      - 'MINIO_ROOT_USER=YOUR_MINIO_USER'
      - 'MINIO_ROOT_PASSWORD=YOUR_MINIO_PASSWORD'
      - 'MINIO_DOMAIN=lobe-s3-api.example.com'
      - 'MINIO_API_CORS_ALLOW_ORIGIN=https://lobe.example.com' # Your LobeChat's domain name.
    restart: always
    command: >
      server /etc/minio/data --address ":9000" --console-address ":9001"

Make sure the MINIO_API_CORS_ALLOW_ORIGIN environment variable is set to your LobeChat's domain name [2][3].

If the issue persists, you might want to check the MinIO WebUI under Configuration - API - Cors Allow Origin to ensure that the CORS settings are correctly applied.

To continue talking to Dosu, mention @dosu.

zylinzzz commented 1 week ago

@zylinzzz 你好!我是Dosu,我是一个可以帮助您解决软件问题,回答问题,并成为贡献者的机器人。我在这里帮助您解决问题,同时等待人类维护者的到来。

I found a similar unsolved discussion that might be related to your issue: [Bug] 上传文件报错,已经对接cloudflareR2存储 [1].

Regarding your specific issue with CORS errors when uploading images with lowercase extensions (e.g., .jpg, .png), while uppercase extensions (e.g., .JPG, .PNG) work fine, it seems like the CORS configuration might not be handling case sensitivity correctly.

In the lobe-chat codebase, the file upload logic converts filenames to lowercase before determining the file type to ensure case insensitivity. This is done in the partitionContent method of the ChunkingLoader class:

partitionContent = async (filename: string, content: Uint8Array) => {
  // ...
  const type = this.getType(filename?.toLowerCase());
  // ...
};

private getType = (filename: string): LangChainLoaderType | undefined => {
  if (filename.endsWith('pptx')) {
    return 'ppt';
  }

  if (filename.endsWith('docx') || filename.endsWith('doc')) {
    return 'doc';
  }

  if (filename.endsWith('pdf')) {
    return 'pdf';
  }

  if (filename.endsWith('tex')) {
    return 'latex';
  }

  if (filename.endsWith('md') || filename.endsWith('mdx')) {
    return 'markdown';
  }

  const ext = filename.split('.').pop();

  if (ext && SupportedTextSplitterLanguages.includes(ext as SupportedTextSplitterLanguage)) {
    return 'code';
  }

  if (ext && LANGCHAIN_SUPPORT_TEXT_LIST.includes(ext)) return 'text';
};

Ensure that your CORS configuration in the Docker Compose setup for MinIO is correctly set. The relevant part of the Docker Compose configuration should look like this:

minio:
    image: minio/minio
    container_name: lobe-minio
    ports:
      - '9000:9000'
      - '9001:9001'
    volumes:
      - './s3_data:/etc/minio/data'
    environment:
      - 'MINIO_ROOT_USER=YOUR_MINIO_USER'
      - 'MINIO_ROOT_PASSWORD=YOUR_MINIO_PASSWORD'
      - 'MINIO_DOMAIN=lobe-s3-api.example.com'
      - 'MINIO_API_CORS_ALLOW_ORIGIN=https://lobe.example.com' # Your LobeChat's domain name.
    restart: always
    command: >
      server /etc/minio/data --address ":9000" --console-address ":9001"

Make sure the MINIO_API_CORS_ALLOW_ORIGIN environment variable is set to your LobeChat's domain name [2][3].

If the issue persists, you might want to check the MinIO WebUI under Configuration - API - Cors Allow Origin to ensure that the CORS settings are correctly applied.

To continue talking to Dosu, mention @dosu.

My CORS configuration in the Docker Compose setup for MinIO and the MinIO WebUI under Configuration - API - CORS Allow Origin is set correctly.