[Bug] Vercel 上部署的服务端数据库版web页面中的缩略图不显示，报跨域CORS错误

[Ryaningli]

📦 Environment

Vercel

📌 Version

a20dfbd

💻 Operating System

Windows

🌐 Browser

Chrome

🐛 Bug Description

进入主页后缩略图不显示，控制台报错如：
Access to fetch at 'https://registry.npmmirror.com/@lobehub/chat/latest' from origin 'https://xxx.xxx.top' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

📷 Recurrence Steps

No response

🚦 Expected Behavior

No response

📝 Additional Information

No response

[lobehubbot]

👀 @Ryaningli

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]

Hey @Ryaningli! 👋 I'm here to help you with your bug report. Let's squash this bug together!

I found a similar unsolved discussion regarding a file upload error with Cloudflare R2 storage ^[1]. Additionally, there is a closed issue related to a 403 error caused by an unallowed referer, but no solution was found in the comments ^[2].

To resolve the CORS error you're experiencing with the Vercel-deployed web page, you need to configure the CORS settings in your Cloudflare R2 storage bucket. The error is likely due to the Referer ACL denial, which can be addressed by allowing requests from your Vercel domain.

Here is how you can configure the CORS settings:

1. Go to the settings of your Cloudflare R2 storage bucket.
2. Find the CORS configuration section.
3. Add a CORS rule to allow requests from your Vercel domain. The configuration should look like this:

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

4. Save the configuration.

This setup will allow your Vercel-deployed web page to access resources from the Cloudflare R2 bucket, resolving the CORS error ^[3].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[arvinxx]

你是不是用了 .top 域名？

[lobehubbot]

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

---

Did you use a .top domain name?

[Ryaningli]

机器人检测到问题主体的语言不是英语，自动翻译。👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

您使用了 .top 域名吗？

你是不是用了 .top 域名？

是的我使用了.top域名

[lobehubbot]

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

---

The robot detects that the language of the subject of the question is not English and automatically translates it. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Did you use a .top domain name?

Did you use the .top domain name?

Yes I used the .top domain name

[Sun-drenched]

.top

域名问题，top域名黑灰产太多，被禁了。

[lobehubbot]

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

---

.top

There is a domain name problem. The top domain name is too popular and has been banned.

[Ryaningli]

.top

域名问题，top域名黑灰产太多，被禁了。

原来如此，有其他非.com且不会导致类似问题的顶级域名推荐么？

[lobehubbot]

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

---

.top

There is a domain name problem. The top domain name has too many black and gray properties and has been banned.

I see, is there any recommendation for other top-level domain names that are not .com and will not cause similar problems?

[dosubot]

I found a similar closed issue regarding a 403 error caused by an unallowed referer, but no solution was found in the comments ^[1].

To resolve the CORS error preventing thumbnail images from displaying on a Vercel-deployed web page, you can configure the Cross-Origin Resource Sharing (CORS) settings in your Cloudflare R2 storage bucket. Here’s how:

1. Access the CORS Configuration: In the settings of your Cloudflare R2 storage bucket, locate the CORS configuration section.

2. Add a CORS Rule: Add a rule to allow requests from your Vercel-deployed domain. The configuration should look like this:

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

3. Save the Configuration: After adding the CORS rule, make sure to save the configuration.

This setup will allow your Vercel-deployed web page to access resources from the Cloudflare R2 bucket, resolving the CORS error ^[2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[Sun-drenched]

.top

域名问题，top域名黑灰产太多，被禁了。

原来如此，有其他非.com且不会导致类似问题的顶级域名推荐么？

除了.top其他的应该都没啥问题，找个看着顺眼、价格合适的就行。

[lobehubbot]

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

---

.top

There is a domain name problem. The top domain name has too many black and gray properties and has been banned.

I see, is there any recommendation for other top-level domain names that are not .com and will not cause similar problems?

Except for .top, everything else should be fine. Just find one that looks pleasing to the eye and is priced appropriately.

[Ryaningli]

.top

域名问题，top域名黑灰产太多，被禁了。

原来如此，有其他非.com且不会导致类似问题的顶级域名推荐么？

除了.top其他的应该都没啥问题，找个看着顺眼、价格合适的就行。

好的谢谢你

[lobehubbot]

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

---

.top

There is a domain name problem. The top domain name has too many black and gray products and has been banned.

I see, is there any recommendation for other top-level domain names that are not .com and will not cause similar problems?

Except for .top, everything else should be fine. Just find one that looks pleasing to the eye and has a suitable price.

ok thank you

[lobehubbot]

✅ @Ryaningli

This issue is closed, If you have any questions, you can comment and reply.
此问题已经关闭。如果您有任何问题，可以留言并回复。