Vuejs redirect to FastApi with caddy

Help
1

1. Caddy version (caddy version): V2.3.0

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:

d. My complete Caddyfile or JSON config:

:80 {

root * /var/www/html
file_server
}

handle_path /administracion/ * {
   root * /var/www/html/smiled-front/dist
 file_server
 }

handle_path /admin/ *:443 {
 reverse_proxy 127.0.0.1:8000 {
        header_up Host {http.request.host}
        header_up X-Real-IP {http.request.remote}
        header_up X-Forwarded-For {http.request.remote}
        header_up X-Forwarded-Port {http.request.port}
        header_up X-Forwarded-Proto {http.request.scheme}
  }
 }

3. The problem I’m having:

I have a Vuejs app running at /administracion route, with a login form, so after enter credentials and submit form I spect a call to 127.0.0.1:8000/admin/auth/login (where my fastapi API runs on gunicorn).

4. Error messages and/or full log output:

CORS policy error.

5. What I already tried: change the port where API runs

6. Links to relevant resources:

2

It looks like it’s redirecting you from http://127.0.0.1 to http://127.0.0.1:8000. Make sure the redirect uses the right port.

This isn’t valid syntax. handle_path takes a path prefix as an option. For example handle_path /admin/* { or handle_path /admin* {

Also, it seems like you have handle_path outside your :80 site. It needs to be inside that site block. See the structure:

Also please run caddy fmt on your config to clean up the syntax, it’s quite messy.

Remove all these. They’re not necessary, and in some cases may even be harmful.

1 Like
3

Ok , I did some modification to my Caddyfile:

example.com {

  root * /var/www/html
  file_server

  handle_path /administracion/* {
  root * /var/www/html/smiled-front/dist
  file_server
 }

  handle_path /admin/* {
    reverse_proxy 127.0.0.1:8000
  }
}

But still getting the same error…really frustrating.

4

If you don’t share logs or curl -v output of what you’re seeing, then I can’t help.

Help me help you.

5 
root@localhost:/var/www/html/smiled-front# curl -v 127.0.0.1:8000
* Rebuilt URL to: 127.0.0.1:8000/
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to 127.0.0.1 (127.0.0.1) port 8000 (#0)

GET / HTTP/1.1
Host: 127.0.0.1:8000
User-Agent: curl/7.58.0
Accept: /

HTTP/1.1 404 Not Found
date: Fri, 07 May 2021 20:09:13 GMT
server: uvicorn
content-length: 22
content-type: application/json

* Connection #0 to host 127.0.0.1 left intact

That’s what I’m seeing…please tell me if is what you expect.

6

Your request isn’t hitting Caddy, it’s hitting your uvicorn server. Caddy is listening on port 80, not 8000.

1 Like
7

Ok, I understand…but I don’t know how to solve it…should I create something like example.com:8000 ??

8

Your goals are not clear here. I can’t answer that question without more information.

9

I figured out !! now it’s working…I have the .env variable inside my vue app pointing to localhost instead my domain…thank you !! you were big help!!

10

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