☰

nginx反向代理將URL中的子域傳遞到後端

tag-icon • tag-icon nginx proxy
nginx反向代理將URL中的子域傳遞到後端

使用 nginx，是否可以代理我的 React 應用程式的傳入 URL，以「看到」它與用戶透過 React Router 處理資料變數的不同？

例如，用戶會訪問https://foo.app.live.com，我的應用程式會將傳入請求視為http://localhost:3000/foo.

更多範例：

  • https://foo.app.live.com===http://localhost:3000/foo
  • https://foo.app.live.com/login===http://localhost:3000/foo/login
  • https://foo.app.live.com/event/1===http://localhost:3000/foo/event/1

我用這個區塊進行了測試，整個 URI 被加入到域的末尾：

location /(.*)$ {
  proxy_pass http://localhost:3000/$1;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "";
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

我缺什麼？

答案1

您可以透過在位置區塊中使用帶有中斷標誌的重寫指令來做到這一點。在你的情況下，它將是：

rewrite (.*) /foo$1 break;

使用此配置，您的 URI 將更改，但僅更改為上游伺服器，用戶不會注意到它。有關更多詳細信息，請查看此處的 nginx 文件：http://nginx.org/en/docs/http/ngx_http_rewrite_module.html 謝謝

答案2

嘗試使用這個版本：

location / {
    proxy_pass http://localhost:3000/foo$uri;
    proxy_http_version 1.1;      
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "";
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

相關內容