Note: This article isn't tied to any specific software or service. It covers common issues and solutions related to communication with reverse proxies in general.
For detailed implementation support with open-source software like Apache and NGINX, or specific CDN services like AWS and Cloudflare, consultation is available on select Enterprise plans. Please contact us for more information.
Technical requirements and limitations
Communication and network requirements
A network connection must be established between the reverse proxy server and the Studio.Design origin server.
Communication from the proxy server to the Studio.Design domain (https://[project-value].studio.site) must work correctly (verify using tools like curl or netstat).
TCP port 443 (HTTPS) must be allowed through your firewall.
If needed, you should be able to raise the log level on the reverse proxy server to check details.
Header requirements
When sending requests to Studio.Design, the Host header must be set to the Studio.Design origin domain.
The "x-studio-proxy-key" header must include the proxy key issued by Studio.Design.
Forwarding rule and path requirements
The forwarding rules set in the reverse proxy must correctly map /[directory] to https://[project-value].studio.site/[directory].
The matching path or page must exist in your Studio.Design project and be set to published.
Cache and performance requirements
We recommend disabling the reverse proxy's cache policy during both testing and production.
Caching error responses can cause issues.
Resource and MIME type requirements
Static resources under /_nuxt, which are needed to render Studio.Design pages, must also be configured for forwarding.
When resources like /_nuxt/entry.[hash].js are requested, the Content-Type header must correctly be set to "application/javascript". You may need to review the MIME type settings on your reverse proxy.
Since the hash values inside /_nuxt change as Studio.Design is updated, we recommend using flexible path matching such as wildcards.
Troubleshooting and FAQ
Requests aren't reaching Studio.Design
Requests aren't reaching Studio.Design
If you're seeing "502 Bad Gateway" or "503 Service Unavailable" when forwarding to Studio.Design, check the following:
(1) Network connectivity
Use curl or similar tools to confirm that the reverse proxy server can reach the Studio.Design site (https://[project-value].studio.site).
If needed, use commands like netstat to check that the TCP connection (especially on port 443) is allowed through your firewall and is established properly.
Temporarily raising the log level on the reverse proxy server can help you investigate further.
(2) Header settings
Make sure the Host header is correctly set to the Studio.Design origin domain.
The x-studio-proxy-key header must contain the correct proxy key issued by Studio.Design.
Studio.Design returns 404 Not Found
Studio.Design returns 404 Not Found
If communication with Studio.Design is working but you're getting "404 Not Found", check the following:
(1) Forwarding rules
Make sure the reverse proxy's forwarding settings are configured correctly and that requests are being sent to "https://[project-value].studio.site/[forwarded-directory]".
(2) Page path and publish status
Confirm that the target page path exists in your Studio.Design project and that it's published.
(3) Disable caching
Make sure the reverse proxy's cache is disabled. When caching is enabled, error responses may be stored.
The response is 200 but the page is blank
The response is 200 but the page is blank
If Studio.Design returns a normal response but the page appears blank, check the following:
(1) Forwarding the /_nuxt directory
Make sure the resource files under /_nuxt, which are required to render the page, are also being forwarded.
(2) Content-Type header settings
Check that files like /_nuxt/entry.[hash].js are being served with a Content-Type header of "application/javascript". You may need to review your MIME type settings.
(3) Disable caching
Make sure the reverse proxy's cache policy is disabled. When enabled, error responses may get cached.
nuxt