Open
Conversation
Use window.location.origin for dynamic API base URL in frontend This commit fixes hardcoded `http://127.0.0.1:5001` URLs in the frontend, which caused client browsers to attempt API calls to their local machine instead of the deployed server (e.g., `http://command.example.org:5001`). The changes update frontend to use `window.location.origin` for the API base URL, ensuring requests target the correct server in production. Changes: - Modified `web/src/api/apiConfig.js` to set `baseurl` using `typeof window !== 'undefined' ? window.location.origin : 'http://127.0.0.1:5001'`, ensuring compatibility with non-browser environments (e.g., during `vue-cli-service build`). - Updated `web/src/components/ui/elements/GrafanaRenderedGraph.vue` to use the same dynamic base URL in the `getImageURL` computed property. - Retained fallback to `http://127.0.0.1:5001` for local development and build-time safety. These changes enable reliable API and monitoring image requests in hosted deployments without requiring environment variables or reverse proxies, while maintaining build compatibility.
This update corrects a logic error in how the frontend determines the `baseurl` for API calls. **Original line:** ```js const baseurl = typeof window !== 'undefined' ? window.location.origin || 'http://127.0.0.1:5001'; ``` While this appears to provide a fallback, the fallback is only applied if `window.location.origin` is falsy — **but `window` is accessed regardless**, which can lead to errors in non-browser environments (e.g., SSR, tests) or unexpected behavior if `origin` is empty or malformed. **Corrected version:** ```js const baseurl = window?.location?.origin || 'http://127.0.0.1:5001'; ``` This uses optional chaining to safely access `window.location.origin` only if `window` and `location` exist, and reliably falls back to `'http://127.0.0.1:5001'` otherwise.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Use window.location.origin for dynamic API base URL in frontend
This commit fixes hardcoded
http://127.0.0.1:5001URLs in the frontend, which caused client browsers to attempt API calls to their local machine instead of the deployed server (e.g.,http://command.example.org:5001). The changes update frontend to usewindow.location.originfor the API base URL, ensuring requests target the correct server in production.Changes:
web/src/api/apiConfig.jsto setbaseurlusingtypeof window !== 'undefined' ? window.location.origin : 'http://127.0.0.1:5001', ensuring compatibility with non-browser environments (e.g., duringvue-cli-service build).web/src/components/ui/elements/GrafanaRenderedGraph.vueto use the same dynamic base URL in thegetImageURLcomputed property.http://127.0.0.1:5001for local development and build-time safety.These changes enable reliable API and monitoring image requests in hosted deployments without requiring environment variables or reverse proxies, while maintaining build compatibility.
fixes: #5