Unable to apply CORS while reverse_proxy

1. The problem I’m having:

I am trying to implement CORS to limit accessing the given matcher. If CORS policy does not match I do not want it to proceed to reverse_proxy. Rather over here, it is going to reverse_proxy and responding back to client as well. Origin is http://localhost:5173 whereas I have setup CORS for https://localhost:5174

Am I doing any wrong configuration over here? Please help me out.

2. Error messages and/or full log output:

3. Caddy version:

2.8.4

4. How I installed and ran Caddy:

Using docker and docker compose

a. System environment:

Macbook Air M2, MacOS, Sonoma 14.5

c. Service/unit/compose file:

services:
  caddy:
    image: caddy:2.8.4-alpine
    ports:
      - 80:80
      - 443:443
      - 443:443/udp
    environment:
      - CREDS
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - caddy_data:/data
      - caddy_config:/config
    networks:
      - internal-net
    restart: unless-stopped
volumes:
  caddy_data:
    driver_opts:
      type: none
      o: bind
      device: /Users/username/common/docker_volumes/caddy_data
  caddy_config:
    driver_opts:
      type: none
      o: bind
      device: /Users/username/common/docker_volumes/caddy_config
networks:
  internal-net:
    name: internal-net
    external: true

d. My complete Caddy config:

(cors) {
	@origin{args[0]} header Origin {args[0]}
	header @origin{args[0]} Access-Control-Allow-Origin "{args[0]}"
	header @origin{args[0]} Vary Origin
}

examplesite.localhost {
	@posttoken {
		method POST
		path /token/oauth
	}

	handle @posttoken {
		import cors "https://localhost:5174"
		reverse_proxy {
			to https://www.example.com
			header_up Authorization "Basic dXNlckBleGFtcGxlLmNvbTpwYXNzd29yZA=="
			header_up Host {upstream_hostport}
		}
	}

	reverse_proxy local-solution-dev:80
}

Your screenshot has Origin: http://localhost:5173/ which doesn’t match your config.

CORS is a concern of browsers, I don’t think it makes sense for it to affect things otherwise.

2 Likes

@francislavoie , thanks for responding and sorry on my behalf for late reply.

That’s correct. I want my request to allow CORS only if it comes from https://localhost:5174. But in this case, the request is still being allowed.

I agree. But my understanding is if CORS rules are applied at the reverse_proxy level, the browser shall enforce them.

One another experiment I tried was, rather than reverse_proxy if I use respond "Hello World", CORS will successfully block the request from the same ORIGIN.

I would like to understand why it’s CORS blocked in case of respond "Hello World" and why it allows a request when it is reverse_proxy ?

Well, Caddy doesn’t do anything with CORS by default. That’s an application-layer concern. You should try to get that sorted in your app first, before trying to do any config in Caddy.

2 Likes

@francislavoie ,
Thanks a lot. That makes a lot of things clear for me. More into CORS and how Caddy works.

I tried to illustrate my understanding in the image below, correct me if I am wrong anywhere.

Once again thank you so much for clarifying.

I find that a bit confusing, but yeah. The * is coming from your app.

1 Like

I have not shown 2 requests originating from the Client browser which may be the reason.
1 separate request for respond directive and 1 separate request for reverse_proxy directive.

You are right, * is coming from the backend app.

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