[Bug]: `/proxy/<port>/` does not work (at least for Streamlit and Vaadin apps)

Is there an existing issue for this?

• I have searched the existing issues

OS/Web Information

• Web Browser: Chrome
• Local OS: MacOS
• Remote OS: Ubuntu 22.04
• Remote Architecture: x86
• code-server --version: 4.7.1

Steps to Reproduce

1. Clone any Streamlit or Vaadin app (possibly others?), e.g. https://github.com/aghasemi/streamlit_js_eval.
2. Run it. Example: streamlit run example.py
3. Vidit myCodeServer/proxy/8501

Expected

The app should run.

Actual

There is just a blank screen with Streamlit loading title.

Logs

No response

Screenshot/Video

On the server, logs look normal.

On the client (browser), if you open the JS console, you see errors in the form of

/:vendor/bokeh/bokeh-gl-2.4.3.min.js:1    
 Failed to load resource: the server responded with a status of 404 (Not Found) 

, where I believe the part with the colon is the culprit.

Is there anything else I need to do to make this work? I just followed the steps in .

Many thanks Best

Does this issue happen in VS Code or GitHub Codespaces?

• I cannot reproduce this in VS Code.
• I cannot reproduce this in GitHub Codespaces.

Are you accessing code-server over HTTPS?

• I am using HTTPS.

Notes

No response

[code-asher]

Uhh nevermind I am being dumb, a proxied application at the root would only see / in both trailing and non-trailing cases which means a trailing slash is always required at the root of a proxied application (unless the rewriting proxy itself distinguishes between a blank string and / at the root which I am not sure they do; would need to test this). The last paragraph I wrote in the previous comment only applies to the application’s own sub-paths.

I guess to summarize all the noise I just put down this seems to be working as intended. 😆

[code-asher]

I was not able to reproduce the colon (it looks like it is evaluating the JS but not sure how that would happen) but for anyone curious the served HTML looks like this:

<script src="./vendor/viz/viz-1.8.0.min.js" type="javascript/worker"></script>
<script src="./vendor/bokeh/bokeh-2.4.3.min.js"></script>
<script src="./vendor/bokeh/bokeh-widgets-2.4.3.min.js"></script>
<script src="./vendor/bokeh/bokeh-tables-2.4.3.min.js"></script>
<script src="./vendor/bokeh/bokeh-api-2.4.3.min.js"></script>
<script src="./vendor/bokeh/bokeh-gl-2.4.3.min.js"></script>
<script src="./vendor/bokeh/bokeh-mathjax-2.4.3.min.js"></script>
<link href="./static/css/5.71be5c0a.chunk.css" rel="stylesheet">
<link href="./static/css/main.b46f6fce.chunk.css" rel="stylesheet">

The behavior of . in browsers depends on the trailing slash so for example if the URL is ./vendor then with /proxy/8501 that becomes /proxy/vendor (a 404) and with /proxy/8501/ that becomes /proxy/8501/vendor (works).

~Ideally the application itself would check for a trailing slash and use either . or ./8501 so it works with or without a trailing slash (this is what code-server does to work at any path with or without a trailing slash) but this is pretty rare; most applications in the wild seem to depend on either a hard-coded base path or a trailing slash.~ (nevermind see next comment)