Caddy reverse_proxy 和 React 路由器

Posted 2023-02-19

【中文标题】Caddy reverse_proxy 和 React 路由器

【英文标题】：Caddy reverse_proxy and React Router

【发布时间】：2021-09-21 07:06:05

【问题描述】：

我无法设置我的 Caddyfile 以使用 React SPA 应用程序，这样

React 路由路由工作 对/api/（例如/api/foo）的调用被反向代理到另一个位置

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

我们如何解决这个问题Caddyfile？

www.example.com 
    redir https://example.comuri


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。但是，反向代理似乎正在工作：当我们访问 https://example.com/api/foo 时，API 服务器正在获得点击，但它错误地将它们作为 http://api.example.com:8000/api/foo 而不是 http://api.example.com:8000/foo

www.example.com 
    redir https://example.comuri


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 start --config ~/foo/Caddyfile启动Caddy

【参考方案1】：

我得到了以下工作：

http://localhost 
    root * ./trial-ui
    route 
        reverse_proxy /api/* http://127.0.0.1:8080
        try_files path /index.html
        file_server