SvelteKit 如何在代理下的 fetch url 中省略主机地址

Question

我已经配置了代理，所以 http://localhost:3000/api/articles 转到 http://127.0.0.1:8000/articles/p>

svelte.config.js:

const config = {
    kit: {
        target: '#svelte',
        vite: {
            server: {
                proxy: {
                    '/api': {
                        target: 'http://127.0.0.1:8000',
                        rewrite: (path) => path.replace(/^\/api/, ''),
                        changeOrigin: true,
                    }
                }
            }
        }
    }
};

像这样的请求工作得很好:

<script context="module">
    export const load = async ({ fetch }) => {
        const res = await fetch('http://localhost:3000/api/articles');
        ...
    }
</script>

但如果省略主机，它们将不起作用:

<script context="module">
    export const load = async ({ fetch }) => {
        const res = await fetch('/api/articles');
        ...
    }
</script>

res 包含 404 错误

玩https://kit.svelte.dev/docs#configuration-host没有帮助

那么，在proxy下load的fetch中是否可以省略host呢？

Answer 1

感谢您分享您的 vite 配置。我正在使用 @sveltejs/kit@1.0.0-next.522，它在端口 5173 上以开发模式运行，我在端口 8080 上运行一个 http 服务器，它只是响应»早上好, 世界!«.

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';

const config: UserConfig = {
    plugins: [sveltekit()],
    server: {
        proxy: {
            '/api': {
                target: 'http://[::1]:8080',
                rewrite: (path) => path.replace(/^\/api/, ''),
                changeOrigin: true
            }
        }
    }
};

export default config;

// src/routes/hello/+page.svelte
<script lang="ts">
    const hi = fetch('/api').then((x) => x.text());
</script>

{#await hi}
    <p>Loading ...</p>
{:then data}
    <p>Greeting: {data}</p>
{:catch error}
    <p>Error {error.message}</p>
{/await}

在 http://127.0.0.1:5173/hello 上，我的浏览器首先呈现 Loading ... 然后稳定到 Greeting: Good morning, world !。