Make client API calls relative instead of hardcoded localhost:5144
Some checks failed
CI/CD / build-test-deploy (push) Has been cancelled
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:
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -4,5 +4,11 @@ export default defineConfig({
|
||||
root: "src/Client",
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:5144",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user