Make client API calls relative instead of hardcoded localhost:5144
Some checks failed
CI/CD / build-test-deploy (push) Has been cancelled

The client always called a hardcoded http://localhost:5144, which only
worked when browser and server shared the same "localhost" — breaks for
any real remote deployment, since the browser would try to reach that
port on the visitor's own machine instead of the actual server.

Now every environment routes /api/* to the server under the same origin
the page was loaded from, so the client code needs no per-environment URL:
- Docker (client container's own nginx) proxies /api/ to the server
  container.
- `npm run dev` (Vite) proxies /api to localhost:5144 via server.proxy.
- Production nginx (reverse proxy + TLS) just needs to forward everything
  to the client container, which already knows how to route /api itself.

Also incidentally removes CORS from the picture everywhere, since none of
these setups make a cross-origin request anymore.
This commit is contained in:
danamir
2026-08-06 14:15:15 +03:00
parent 74497fa747
commit dfbc43a43e
3 changed files with 24 additions and 1 deletions

View File

@@ -10,7 +10,13 @@ open Fable.Core
open Fable.Core.JsInterop
open Domain
let private serverUrl = "http://localhost:5144"
// Relative on purpose the server is always reached through whatever's
// serving this page under `/api/*`: the client's own nginx in Docker
// (see Client/nginx.conf), Vite's dev-server proxy (vite.config.js) for
// `npm run dev`, or the host reverse proxy in production. This also means
// the browser never makes a cross-origin request, so CORS never enters
// into it for any of these setups.
let private serverUrl = ""
[<Emit("Object.prototype.hasOwnProperty.call($0, $1)")>]
let hasKey (_o: obj) (_key: string) : bool = jsNative

View File

@@ -2,6 +2,17 @@ server {
listen 80;
root /usr/share/nginx/html;
# No trailing slash on proxy_pass here — the full matched URI (including
# the /api/ prefix) is forwarded unchanged, matching Giraffe's route
# definitions in Server/Routes.fs, which all start with /api/.
location /api/ {
proxy_pass http://server:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location / {
try_files $uri $uri/ /index.html;
}