[Bug] 上传文件报错，已经对接cloudflareR2存储

[whistle003]

📦 部署环境

Vercel

📌 软件版本

1.15.12

💻 系统环境

macOS

🌐 浏览器

Chrome

🐛 问题描述

对话框直接上传文件提示如下：
“请确认你的网络是否正常，并检查文件存储服务跨域配置是否正确”
左侧文件管理上传文件无任何反馈，一直显示准备上传

📷 复现步骤

No response

🚦 期望结果

No response

📝 补充信息

No response

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

📦 Deployment environment

Vercel

📌 Software version

1.15.12

💻 System environment

macOS

🌐 Browser

Chrome

🐛 Problem description

The prompts for directly uploading files in the dialog box are as follows:
"Please confirm whether your network is normal and check whether the cross-domain configuration of the file storage service is correct"
There is no feedback when uploading files in the file management on the left, and it always shows that it is ready to upload.

📷 Steps to reproduce

No response

🚦 Expected results

No response

📝 Supplementary information

No response

[lobehubbot]

👀 @whistle003

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]]

Hey @whistle003, I'm here to help you with any bugs, questions, or contributions! I'm Dosu, a bot designed to assist you. Let's squash this bug together! 🤖

I found a similar closed issue that might be relevant to your problem: [Bug] 使用cloudflare的r2储存上传图片提示错误 ^[1].

To resolve the file upload error in Vercel when using Cloudflare R2 storage, you need to configure the cross-origin resource sharing (CORS) settings correctly and ensure that all necessary environment variables are set up properly. Here are the steps to do so:

1. Configure Cross-Origin Resource Sharing (CORS):

   • Go to the settings of your Cloudflare R2 storage bucket.
   • Find the CORS configuration section.
   • Add a CORS rule to allow requests from your Vercel project domain.

   Example CORS configuration:

   [
     {
       "AllowedOrigins": ["https://your-project.vercel.app"],
       "AllowedMethods": ["GET", "PUT", "HEAD", "POST", "DELETE"],
       "AllowedHeaders": ["*"]
     }
   ]

2. Ensure Environment Variables are Correct:

   • Make sure you have set the necessary environment variables in your Vercel project with the correct values from your Cloudflare R2 bucket.

   Example environment variables:

   S3_ACCESS_KEY_ID=your_access_key_id
   S3_SECRET_ACCESS_KEY=your_secret_access_key
   S3_BUCKET=your_bucket_name
   S3_ENDPOINT=https://your_endpoint.r2.cloudflarestorage.com
   S3_PUBLIC_DOMAIN=https://s3.your-domain.com

3. Check the Endpoint URL:

   • Ensure that the S3_ENDPOINT does not include the bucket name in the path. It should be the base URL provided by Cloudflare R2.

4. Additional Configuration Steps:

   • If you are using a custom domain for your S3 bucket, ensure that the S3_PUBLIC_DOMAIN is correctly set to reflect this.
   • Verify that the S3_ENDPOINT URL is correctly formatted and does not include any additional path segments that could cause issues.

By following these steps, you should be able to resolve the file upload error related to network and cross-origin configuration when using Cloudflare R2 storage with Vercel. Additionally, ensure that all environment variables are correctly set up in Vercel to avoid any issues with database migration or other configurations ^[2][3][4].

To continue talking to Dosu, mention @dosu.

[sxjeru]

可以右键网页，最底部“检查”，选择“网络”标签，然后再次做上传行为，以查看错误详情。最后请截图传到此处。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

You can right-click the web page, "Inspect" at the bottom, select the "Network" tab, and then upload again to view the error details. Finally, please take a screenshot and upload it here.

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

You can right-click the web page, "Inspect" at the bottom, select the "Network" tab, and then upload again to view the error details. Finally, please take a screenshot and upload it here.

[sxjeru]

请按文档解决。
https://lobehub.com/zh/docs/self-hosting/advanced/s3/cloudflare-r2#%E9%85%8D%E7%BD%AE%E8%B7%A8%E5%9F%9F

[whistle003]

请按文档解决。 https://lobehub.com/zh/docs/self-hosting/advanced/s3/cloudflare-r2#%E9%85%8D%E7%BD%AE%E8%B7%A8%E5%9F%9F

大佬，这个跨域配置，我域名填写的自己对接到vercel的，一定要用他默认的https://your-project.vercel.app吗？

[whistle003]

请按文档解决。 https://lobehub.com/zh/docs/self-hosting/advanced/s3/cloudflare-r2#%E9%85%8D%E7%BD%AE%E8%B7%A8%E5%9F%9F

[sxjeru]

写你 vercel 部署的 lobechat 域名，可以是自定义的。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Write the domain name of your lobechat deployment, which can be customized.

[whistle003]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Write the domain name of your lobechat deployment, which can be customized.

写你 vercel 部署的 lobechat 域名，可以是自定义的。

难受了，我严格按照文档操作的，其他的都很完美，就上传文件出错

[sxjeru]

改了还是不行？你 cors 策略怎么写的，域名就写你的 https://chat.funqie.fun

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

It still doesn't work after changing it? How do you write your cors policy? The domain name should be yours: https://chat.funqie.fun

[whistle003]

改了还是不行？你 cors 策略怎么写的，域名就写你的 https://chat.funqie.fun

https://private-user-images.githubusercontent.com/64147479/364771202-09136311-642f-4ed2-85c5-3c8f37cfab0d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NDA4NTAsIm5iZiI6MTcyNTU0MDU1MCwicGF0aCI6Ii82NDE0NzQ3OS8zNjQ3NzEyMDItMDkxMzYzMTEtNjQyZi00ZWQyLTg1YzUtM2M4ZjM3Y2ZhYjBkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA1VDEyNDkxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdhYmZmMzIxYjdlMjk1MzZiMmQ5NDQ3MmE0MTk3MzVmYzc1ZjIyNTc5YjI3MjI5YmUzNTVmYjhjODcxMzM0NjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.1OrDgJyhl6g_5Wtz68lQBn7f9v2_jHo_b0BYZdAkRc4

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

It still doesn’t work after changing it? How do you write your cors policy? The domain name should be yours: https://chat.funqie.fun

https://private-user-images.githubusercontent.com/64147479/364771202-09136311-642f-4ed2-85c5-3c8f37cfab0d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIu Y29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1NDA4NTAsIm5iZiI6MTcyNTU0MDU1MCwicGF0aCI6Ii82NDE0NzQ3OS8zNjQ3NzEy MDItMDkxMzYzMTEtNjQyZi00ZWQyLTg1YzUtM2M4ZjM3Y2ZhYjBkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFp BJTJGMjAyNDA5MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA1VDEyNDkxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdhYmZmMzI xYjdlMjk1MzZiMmQ5NDQ3MmE0MTk3MzVmYzc1ZjIyNTc5YjI3MjI5YmUzNTVmYjhjODcxMzM0NjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmV wb19pZD0wIn0.1OrDgJyhl6g_5Wtz68lQBn7f9v2_jHo_b0BYZdAkRc4

[whistle003]

改了还是不行？你 cors 策略怎么写的，域名就写你的 https://chat.funqie.fun

有没有可能是S3_PUBLIC_DOMAIN的问题？我用的是https://s3.funqie.fun/

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

It still doesn’t work after changing it? How do you write your cors policy? The domain name should be yours: https://chat.funqie.fun

Is it possible that it is a problem with S3_PUBLIC_DOMAIN? I use https://s3.funqie.fun/

[sxjeru]

按文档来的话，是没错的。

[whistle003]

按文档来的话，是没错的。

大佬你好，今天可以上传但是有新的错误，如图所示

[Edward-lyz]

按文档来的话，是没错的。

大佬你好，今天可以上传但是有新的错误，如图所示

暴力但是简单的方法,直接把跨域那里写成通配符*,允许所有跨域就好了.

[willowdong]

按文档来的话，是没错的。

大佬你好，今天可以上传但是有新的错误，如图所示

怎么修改的，我也遇到了上面那个提示跨域配置错误的问题，但确实在cloudflare里配置了跨域域名了

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

According to the documentation, it is correct.