Reverse_proxy backend doesn't pass origin header

1. The problem I’m having:

I have set up my Vue frontend and Node, Express backend on a VPS using Caddy. I want the frontend to be available on domain onezeroacademy.se. The backend should only be available on the VPS, so that only the frontend can access the backend. Previously I have had my frontend on a basic webhotel and my backend on Heroku, so I had set up cors to make only the frontend able to access the backend. But now when I have the frontend and backend on the same server I can’t make it work.

My current config makes the backend available with reverse_proxy on onezeroacademy.se/api*. And it works, except that the frontend doesn’t seem to pass it’s origin header to the backend. So the backend blocks the frontend with cors error.

I have searched and searched but can’t seem to find a proper solution, so I hope some of you guys can help.

2. Error messages and/or full log output:

Access to XMLHttpRequest at 'http://localhost/api/user' from origin 'https://onezeroacademy.se' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

3. Caddy version:

v2.7.6

4. How I installed and ran Caddy:

a. System environment:

Linux Ubuntu 22.04.3 LTS

b. Command:

systemctl enable caddy
systemctl restart caddy

c. Service/unit/compose file:

d. My complete Caddy config:

onezeroacademy.se {
        reverse_proxy /api* localhost:4000

        @try_files {
                not path /api/*
                file {
                        try_files {path} {path}/ /
                }
        }
        rewrite @try_files {http.matchers.file.relative}

        root * /var/www/html/

        file_server

        # Enable automatic HTTPS
        tls {
                on_demand
        }

        # Enable gzip compression
        encode gzip
}

5. Links to relevant resources:

You can simplify/clarify your Caddyfile by writing it like this:

onezeroacademy.se {
	encode gzip

	handle /api* {
		reverse_proxy localhost:4000
	}
        
	handle {
		root * /var/www/html
		try_files {path} {path}/ /index.html
		file_server
	}
}

Browsers send the Origin header. This has nothing to do with Caddy. reverse_proxy passes through request headers as-is.

Thanks for the quick reply and the much nicer looking Caddyfile! :slight_smile:

Yes you’re right, the problem was that the backend needed to be https.

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