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 Fable.Core.JsInterop
|
||||||
open Domain
|
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)")>]
|
[<Emit("Object.prototype.hasOwnProperty.call($0, $1)")>]
|
||||||
let hasKey (_o: obj) (_key: string) : bool = jsNative
|
let hasKey (_o: obj) (_key: string) : bool = jsNative
|
||||||
|
|||||||
@@ -2,6 +2,17 @@ server {
|
|||||||
listen 80;
|
listen 80;
|
||||||
root /usr/share/nginx/html;
|
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 / {
|
location / {
|
||||||
try_files $uri $uri/ /index.html;
|
try_files $uri $uri/ /index.html;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,5 +4,11 @@ export default defineConfig({
|
|||||||
root: "src/Client",
|
root: "src/Client",
|
||||||
server: {
|
server: {
|
||||||
port: 5173,
|
port: 5173,
|
||||||
|
proxy: {
|
||||||
|
"/api": {
|
||||||
|
target: "http://localhost:5144",
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user