[Bug] 启用 pglite 后 vercel 部署的服务如果使用自定义域名会有跨域问题

[AndSonder]

📦 部署环境

Vercel

📦 部署模式

客户端 Pglite 模式(lobe-chat-pglite 镜像)

📌 软件版本

dev

💻 系统环境

Other Linux, macOS

🌐 浏览器

Edge

🐛 问题描述

启用 pglite 后 vercel 部署的服务如果使用自定义域名会有跨域问题导致无法正常初始化 pglite 数据库

{
  "message": "Failed to fetch",
  "name": "TypeError",
  "stack": "TypeError: Failed to fetch\n    at v.fetchFsBundle (https://chat.xxx.xxx/_next/static/chunks/87299-99ff20cb35b5111f.js:1:63322)\n    at v.loadDependencies (https://chat.xxx.xxx/_next/static/chunks/87299-99ff20cb35b5111f.js:1:60476)\n    at https://chat.keter.top/_next/static/chunks/87299-99ff20cb35b5111f.js:1:61991\n    at v.initialize (https://chat.keter.top/_next/static/chunks/87299-99ff20cb35b5111f.js:1:62989)\n    at G (https://chat.keter.top/_next/static/chunks/87299-99ff20cb35b5111f.js:1:63730)\n    at Object.initializeClientDB (https://chat.keter.top/_next/static/chunks/app/%5Bvariants%5D/page-a15d19ccdae49244.js:1:16602)\n    at async https://chat.keter.top/_next/static/chunks/94712-ac45a90a40941aef.js:1:9393"
}

浏览器控制台可以看到有关跨域的报错：

📷 复现步骤

No response

🚦 期望结果

No response

📝 补充信息

能够直接把这个资源静态托管？
https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/postgres.data

[lobehubbot]

👀 @AndSonder

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 @AndSonder! I'm here to help you with bug fixes, answer questions, and even become a contributor. Let's squash those bugs together! 🤖

The issue you're encountering is related to CORS (Cross-Origin Resource Sharing) when using a custom domain with Vercel for the Pglite database. The error message indicates that the request to fetch the Pglite database bundle is being blocked because the server does not include the Access-Control-Allow-Origin header, which is necessary for CORS.

To resolve this issue, you can try the following steps:

1. CORS Configuration: Ensure that the server hosting the Pglite database bundle is configured to allow requests from your custom domain. This involves setting the Access-Control-Allow-Origin header to your custom domain in the server's CORS settings.

2. Static Hosting: As suggested, you can host the Pglite database bundle on a server where you have control over the CORS settings. This way, you can ensure that the necessary headers are included in the response.

3. Proxy Server: Set up a proxy server that fetches the resource and adds the appropriate CORS headers before forwarding the response to your application.

These steps should help you address the CORS issue and allow the Pglite database to initialize correctly on your custom domain.

To continue talking to Dosu, mention @dosu.

---

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

[sxjeru]

top 顶级域名被 npmmirror CDN 拉黑了，临时处理方法是修改下面的资源地址，找一个其他 CDN 的资源吧。

lobe-chat/src/database/client/db.ts

Lines 27 to 35 in ef02986

	// CDN 配置
	private static WASM_CDN_URL =
	'https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/postgres.wasm';
	private static FSBUNDLER_CDN_URL =
	'https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/postgres.data';
	private static VECTOR_CDN_URL =
	'https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/vector.tar.gz';

[lobehubbot]

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

---

The top top-level domain name has been blocked by npmmirror CDN. The temporary solution is to modify the resource address below and find a resource for other CDNs.

lobe-chat/src/database/client/db.ts

Lines 27 to 35 in ef02986

	// CDN 配置
	private static WASM_CDN_URL =
	'https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/postgres.wasm';
	private static FSBUNDLER_CDN_URL =
	'https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/postgres.data';
	private static VECTOR_CDN_URL =
	'https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/vector.tar.gz';

[arvinxx]

能够直接把这个资源静态托管？
https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/postgres.data

这个资源就是静态托管享受全球 CDN 加速的。只是 .top 域名黑产过多被拉黑了

[lobehubbot]

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

---

Can you directly host this resource statically?
https://registry.npmmirror.com/@electric-sql/pglite/0.2.13/files/dist/postgres.data

This resource is static hosting to enjoy global CDN acceleration. It's just that too many black products of domain names have been blocked

[AndSonder]

好的了解了，我再试试看其他的 cdn，感谢各位大佬的解惑

[lobehubbot]

✅ @AndSonder

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

[lobehubbot]

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

---

I have a good understanding, I will try other cdns again. Thank you for your answers