Caddy reverse_proxy 和 React Router

问题描述

我无法将我的 Caddyfile 设置为使用 React SPA 应用程序

1. React 路由器路由有效
2. 对 /api/（例如 /api/foo）的调用被反向代理到另一个位置

在我当前的 Caddyfile 下面，React 路由器似乎正在工作（访问 mysite.com/faq 没有给出 404），但对 API 后端（例如 mysite.com/api/foo）的调用似乎正在尝试加载 React Router 路由。

我们如何解决这个 Caddyfile？

www.example.com {
    redir https://example.com{uri}
}

example.com {
    root * /root/example/frontend/build
    file_server
    encode gzip zstd

    reverse_proxy /api/*  api.example.com:8000

    try_files {path} /index.html
    
    tls [e-mail]

    log {
        output file /root/example/logs/access.log {
                roll_size 100mb
                roll_keep 5
                roll_keep_for 720h
        }
    }
}

---

更新：此 Caddyfile 也不起作用，React 路由器不再起作用，访问 https://example.com/faq 时出现错误 404。但是，反向代理似乎正在工作：API 服务器在我们访问 https://example.com/api/foo 时获得了命中，但它错误地将它们作为 http://api.example.com:8000/api/foo 而不是 http://api.example.com:8000/foo

www.example.com {
    redir https://example.com{uri}
}

example.com {
    root * /root/example/frontend/build
    file_server
    encode gzip zstd

    reverse_proxy /api/*  api.example.com:8000

    @notAPI {
        not {
            path /api/*
        }
        file {
            try_files {path} {path}/ /index.html?{query}
        }
    }
    rewrite @notAPI {http.matchers.file.relative}
    
    tls [e-mail]

    log {
        output file /root/example/logs/access.log {
                roll_size 100mb
                roll_keep 5
                roll_keep_for 720h
        }
    }
}

使用 Caddy v2.4.3

Caddy 使用 caddy start --config ~/foo/Caddyfile

启动

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）