I am having an ongoing confusion in headless mode.
Imagine a site with 2 servers:
- Backend (Craft with element API) on
- Frontend (vue.js) on
Editors pick internal links in the craft cp. In the source of redactor field, they are saved as something like
In the Backend's endpoint, they are rendered out using the domain specified in
So let's say we have an endpoint on
backend.site/en/api/pages/somepage.json which is consumed by the vue frontend.
In the backend's JSON output, we have an internal link that should be rendered as such:
Go to our other terrific <a href="https://frontend.site/en/otherpage">Other Page</a> # Using https://frontend.site as baseURL.
So the logical consequence is to set baseUrl to
https://frontend.site. Naturally, because the website's baseUrl is frontend.site – not the craft backend. But, but.
In my case, this has worked for the default language. But not for any other language – element API returned a 404 when I set the baseUrl to
- backend.site/en/api/pages/somepage.json ✅
- backend.site/de/api/pages/somepage.json 🚫
When I reset baseUrl to backend.site, element API will again render all endpoints. But the links look like this:
Go to our other terrific <a href="https://backend.site/en/otherpage">Other Page</a> # This link doesn't exist
What do you think?
- A misconfiguration, a bug in element api, or a misunderstanding on my side?
- Asked differently: which
baseUrldo you have to set in headless mode?