解决SvelteKit(Node适配器)经Apache反向代理后JS加载失败问题

问题根源 #

• ORIGIN 配置不匹配代理路径：本地运行时 ORIGIN 指向应用直接访问的根地址，但部署后应用通过 /node 子路径对外提供服务，原 ORIGIN 未包含该子路径，导致生成的资源链接仍以根路径开头。
• 未配置 SvelteKit 基础路径：SvelteKit 默认以根路径 / 作为资源前缀，未告知它运行在 /node 子路径下，因此会生成 /_app/xxx 这类根路径资源链接，而非预期的 /node/_app/xxx。

解决方案 #

1. 修改 SvelteKit 配置文件（svelte.config.js），添加基础路径配置：

import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter(),
		paths: {
			base: '/node', // 指定应用运行的子路径
		},
	},
};

export default config;

2. 重新构建应用：执行 npm run build，确保新配置生效。
3. 更新启动命令的 ORIGIN 参数：将 ORIGIN 设置为应用对外的完整访问路径（包含 /node），例如：

HOST=127.0.0.1 PORT=5137 ORIGIN=http://你的虚拟机域名/node node build

4. 优化 Apache 反向代理配置：添加 Cookie 路径修正，避免 Cookie 失效问题：

ProxyPass         /node  http://localhost:5137/ nocanon
ProxyPassReverse  /node  http://localhost:5137/
ProxyPassReverseCookiePath  / /node/

完成以上步骤后，重启 Apache 和 Node 应用，嵌入的 iframe 就能正确加载 /node/_app 下的 JS 文件了。

内容的提问来源于stack exchange，提问作者baitendbidz