Vuejs route failing

Help
1

1. Caddy version (caddy version): 2

2. How I run Caddy:

sudo systemctl start caddy

a. System environment:

ubuntu 18.04

b. Command:

sudo systemctl start caddy

c. Service/unit/compose file:

Paste full file contents here.
Make sure backticks stay on their own lines,
and the post looks nice in the preview pane.

d. My complete Caddyfile or JSON config:

sub.example.cl {

 root * /var/www/html/smiled-front/dist
 file_server

 handle_path /administration* {
    root * /var/www/html/smiled-front/dist
    file_server
    try_files {path} /index.html
 }
}

3. The problem I’m having:

I have a vuejs app, that fails when I visit url with this pattern:

sub.example.cl/administration/some/some-url/ff32f3-f32f32-f3232-3ddd11

I hit f5 and I see that caddy it’s trying to find the current file on this directory:

sub.example.cl/administration/some/some-url/css/app.9fcda3fbba.css". instead of doing it just in /css/app
etc
Why is that ?? All my other routes are working fine, even if I try to refresh page, but this one fails and I don’t know how to solve it. Thanks for your help.

4. Error messages and/or full log output:

5. What I already tried:

6. Links to relevant resources:

2

Which version exactly? It matters.

I’m not sure I understand. Please be more specific.

Show what it looks like when you make the request with curl -v.

Try turning on debug mode (add the below to the top of your Caddyfile) and see what the logs tell you. Debug mode will add more details about what file_server is doing.

{
	debug
}

It’s important that you properly fill out the help topic template so we can help you.

3

@francislavoie Sorry about caddy version, it’s 2.3.0.

I just found the cause of my problem
All my routes follow this pattern:

sub.example.cl/administration/some
sub.example.cl/administration/some2
sub.example.cl/administration/some3

If I add an ending slash to any route, or another content
it fails:

sub.example.cl/administration/some/ → fails
sub.example.cl/administration/some/route → fails
sub.example.cl/administration/some → pass

Why is that ?..fail because caddy append “administration/some” to the root folder
so insted of search in “css/app.css” it’s searching on “administration/some/css/app.css”

4

What do your logs look like after you turn on debug mode?

5

@francislavoie

rewrite",“msg”:“rewrote request”,“request”:{“remote_addr”:“186.107.28.111:42372”,“proto”:“HTTP/2.0”,“method”:“GET”,“host”:“sub.example.cl”,“uri”:"/administration/home/js/chunk-f5bf14fe.367a4a39.js",“headers”:{“Accept-Encoding”:[“gzip, deflate, br”],“X-Moz”:[“prefetch”],“Referer”:[“https://sub.example.cl/administration/home/"],“Te”:[“trailers”],“User-Agent”:["Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0”],“Accept”:["/"],“Accept-Language”:[“es-CL,es;q=0.8,en-US;q=0.5,en;q=0.3”]},“tls”:{“resumed”:true,“version”:772,“cipher_suite”:4865,“proto”:“h2”,“proto_mutual”:true,“server_name”:“sub.example.cl”}},“method”:“GET”,“uri”:"/home/js/chunk-f5bf14fe.367a4a39.js"}

rewrite",“msg”:“rewrote request”,“request”:{“remote_addr”:“186.107.28.111:42372”,“proto”:“HTTP/2.0”,“method”:“GET”,“host”:“sub.example.cl”,“uri”:"/home/js/chunk-f5bf14fe.367a4a39.js",“headers”:{“Referer”:[“https://sub.example.cl/administration/home/"],“Te”:[“trailers”],“User-Agent”:["Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0”],“Accept”:["/"],“Accept-Language”:[“es-CL,es;q=0.8,en-US;q=0.5,en;q=0.3”],“Accept-Encoding”:[“gzip, deflate, br”],“X-Moz”:[“prefetch”]},“tls”:{“resumed”:true,“version”:772,“cipher_suite”:4865,“proto”:“h2”,“proto_mutual”:true,“server_name”:“sub.example.cl”}},“method”:“GET”,“uri”:"/index.html"}
file_server",“msg”:“sanitized path join”,“site_root”:"/var/www/html/smiled-front/dist",“request_path”:"/index.html",“result”:"/var/www/html/smiled-front/dist/index.html"}
file_server",“msg”:“opening file”,“filename”:"/var/www/html/smiled-front/dist/index.html"}
~

6

There seems to be missing some stuff there.

Please use ``` on the lines before and after your logs when posting them, to preserve formatting.

7

@francislavoie Sorry here it is.

May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.0476494,"logger":"http.handlers.file_server","msg":"opening file","filename":"/var/www/html/smiled-front/dist/index.html"}
May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.0475512,"logger":"http.handlers.rewrite","msg":"rewrote request","request":{"remote_addr":"186.107.31.237:53716","proto":"HTTP/2.0","method":"GET","host":"sub.example.cl","uri":"/presupuestos/css/app.0e5ae785.css","headers":{"User-Agent":["Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0"],"Accept-Encoding":["gzip, deflate, br"],"Te":["trailers"],"If-None-Match":["\"qtzc9p2u6\""],"Cache-Control":["max-age=0"],"Accept":["text/css,*/*;q=0.1"],"Accept-Language":["es-CL,es;q=0.8,en-US;q=0.5,en;q=0.3"],"Referer":["https://sub.example.cl/presupuestos/crear"],"If-Modified-Since":["Mon, 31 May 2021 16:25:01 GMT"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","proto_mutual":true,"server_name":"sub.example.cl"}},"method":"GET","uri":"/index.html"}
May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.047701,"logger":"http.handlers.rewrite","msg":"rewrote request","request":{"remote_addr":"186.107.31.237:53716","proto":"HTTP/2.0","method":"GET","host":"sub.example.cl","uri":"/presupuestos/js/chunk-vendors.f3598189.js","headers":{"User-Agent":["Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0"],"Accept":["*/*"],"Accept-Language":["es-CL,es;q=0.8,en-US;q=0.5,en;q=0.3"],"If-Modified-Since":["Mon, 31 May 2021 16:25:01 GMT"],"If-None-Match":["\"qtzc9p2u6\""],"Accept-Encoding":["gzip, deflate, br"],"Referer":["https://sub.example.cl/presupuestos/crear"],"Cache-Control":["max-age=0"],"Te":["trailers"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","proto_mutual":true,"server_name":"sub.example.cl"}},"method":"GET","uri":"/index.html"}
May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.047719,"logger":"http.handlers.file_server","msg":"sanitized path join","site_root":"/var/www/html/smiled-front/dist","request_path":"/index.html","result":"/var/www/html/smiled-front/dist/index.html"}
May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.0477264,"logger":"http.handlers.file_server","msg":"sanitized path join","site_root":"/var/www/html/smiled-front/dist","request_path":"/index.html","result":"/var/www/html/smiled-front/dist/index.html"}
May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.047735,"logger":"http.handlers.file_server","msg":"opening file","filename":"/var/www/html/smiled-front/dist/index.html"}
May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.0477376,"logger":"http.handlers.file_server","msg":"opening file","filename":"/var/www/html/smiled-front/dist/index.html"}
May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.0483518,"logger":"http.handlers.rewrite","msg":"rewrote request","request":{"remote_addr":"186.107.31.237:53716","proto":"HTTP/2.0","method":"GET","host":"sub.example.cl","uri":"/presupuestos/js/app.c8ca1c11.js","headers":{"Accept-Language":["es-CL,es;q=0.8,en-US;q=0.5,en;q=0.3"],"Referer":["https://sub.example.cl/presupuestos/crear"],"If-Modified-Since":["Mon, 31 May 2021 16:25:01 GMT"],"User-Agent":["Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0"],"Accept":["*/*"],"Accept-Encoding":["gzip, deflate, br"],"If-None-Match":["\"qtzc9p2u6\""],"Cache-Control":["max-age=0"],"Te":["trailers"]},"tls":{"resumed":false,"version":772,"cipher_suite":4865,"proto":"h2","proto_mutual":true,"server_name":"sub.example.cl"}},"method":"GET","uri":"/index.html"}
May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.0483742,"logger":"http.handlers.file_server","msg":"sanitized path join","site_root":"/var/www/html/smiled-front/dist","request_path":"/index.html","result":"/var/www/html/smiled-front/dist/index.html"}
May 31 17:40:53 localhost caddy[29938]: {"level":"debug","ts":1622482853.048387,"logger":"http.handlers.file_server","msg":"opening file","filename":"/var/www/html/smiled-front/dist/index.html"}
8

You can see on this one (2nd log, which I trimmed down to only the relevant parts) that Caddy rewrote the path for the request to the CSS file, to index.html instead. I don’t think that was what should happen.

I think this is because try_files looked for a file at /var/www/html/smiled-front/dist/presupuestos/css/app.0e5ae785.css but did not find it, so it falls back to rewriting to /index.html.

I’m not sure what your file structure looks like. Is your config actually handle_path /administration*, or did you just translate that when you posted your config here?

9

@francislavoie thanks for your time and help, this problem is draving me crazy

I have been doing some modifications, and trying different things, but the problem still the same. Here is my update:

Caddyfile

sub.example.cl {

 root * /var/www/html/smiled-front/dist

route {
        reverse_proxy /admin/* localhost:8000
        reverse_proxy /users/* localhost:8000
        try_files {path} {path}/ /index.html
        file_server
    }
}

This config gives me the same problem so I will detail the structure of my vuejs build:

dist
  -css/
  -js/
  -index.html

All routes in my app should be served by index.html, by the way, I remove “/administration” from my routes, so here it is an example:

sub.example.cl/some -> Ok, if I hit f5 loading without problems
sub.example.cl/some/add -> Error(on page refresh), because try "some/add/js/file.js" instead of just go for "/js/file.js"

All my routes should be served by index.html file, independent if it is “sub.example.cl/some” or “sub.example.cl/some/edit/some2/878”
should be pointing to the same root folder.

10

What do the <script> and <link> tags in your HTML look like? If they’re using relative paths, then the browser will be making requests with the rest of the path prepended to it.

This isn’t really something Caddy can solve, so you need to make sure your JS app uses absolute paths with a configurable base path prefix if you need to load it under a subpath.

1 Like
11

@francislavoie 1 minute before I see your response
I went to my vue app, and find a vue.config file that contains this line publicPath: ‘/’ 
I remove that line and now everything is working fine
I cry and smile at the same time hahaha. Thanks for your help!

2 Likes
12

This topic was automatically closed after 30 days. New replies are no longer allowed.