Vite/Preact 非硬编码代理最佳实践

Question

我有一个带有 FastAPI 后端的 preact 前端。在本地主机上一切正常。

但是我在从另一个 IP 地址访问我的服务器时遇到了问题，我通过将获取内容从 http://localhost:8000 更改为服务器计算机的 IP 地址来解决。例如。 http://192.168.0.99:8000.

我在树莓派上使用服务器，它可以改变网络，这就是为什么我不能在代理中使用静态IP地址。这就是我想出以下解决方案的方式：

vite.config.js

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
import os from 'os';

function getLocalIpAddress() {
    const interfaces = os.networkInterfaces();
    for (const name of Object.keys(interfaces)) {
        for (const iface of interfaces[name]) {
            if (iface.family === 'IPv4' && !iface.internal) {
                return "http://" + iface.address + ":8000";
            }
        }
    }
    return 'http://127.0.0.1:8000';
}

function getLocalIpAddressWs() {
    const interfaces = os.networkInterfaces();
    for (const name of Object.keys(interfaces)) {
        for (const iface of interfaces[name]) {
            if (iface.family === 'IPv4' && !iface.internal) {
                return "ws://" + iface.address + ":8000";
            }
        }
    }
    return 'ws://127.0.0.1:8000';
}

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [preact()],
    server: {
        port: 3000,
        host: '0.0.0.0',
        proxy: {
            '/api': {
                target: getLocalIpAddress(), // Replace with your backend server URL
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ''),
            },
            '/socket': {
                target: getLocalIpAddressWs(), // Replace with your backend server URL
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/socket/, ''),
            },
        },
    },
});

这是不好的做法吗？有更好的解决办法吗？

Answer 1

要删除代码中的冗余，您可以将

getLocalIpAddress()

和

getLocalIpAddressWs()

统一为：

function getLocalProxy(proxy) {
    const interfaces = os.networkInterfaces();
    for (const name of Object.keys(interfaces)) {
        for (const iface of interfaces[name]) {
            if (iface.family === 'IPv4' && !iface.internal) {
                return `${proxy}://" + ${iface.address} + ":8000`;
            }
        }
    }
    return `${proxy}://127.0.0.1:8000`;
}

此外，

iface.address 

可能容易出现恶意 URL，因此您希望在应用程序中强制执行同源限制。从未使用过 preact 或 vite，所以我不知道这里的具体细节。