Hello everyone, I am trying to connect my local development environment (a react app) to the server I get the classic CORS error:
Access to XMLHttpRequest at 'http://localhost:8000/my_url' from origin 'https://localhost' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
I know this question is similar to this topic however in my case my backend is actually receiving my requests.
1. Caddy version (caddy version):
v2.4.3 h1:Y1FaV2N4WO3rBqxSYA8UZsZTQdN+PwcoOcAiZTM8C0I=
2. How I run Caddy:
caddy run
a. System environment:
macOS Monterey
d. My complete Caddyfile or JSON config:
(cors) {
@origin{args.0} header Origin {args.0}
header @origin{args.0} Access-Control-Allow-Origin "{args.0}"
}
localhost {
header Access-Control-Allow-Methods "POST,PATCH,PUT,DELETE, GET, OPTIONS"
header Access-Control-Allow-Headers "*"
header Access-Control-Allow-Origin *
reverse_proxy http://localhost:4000
reverse_proxy /candidates/* http://localhost:3000
reverse_proxy /app/enterprise/* http://localhost:3001
reverse_proxy proxy.localhost/*
}
3. The problem I’m having:
I have multiple react projects that have multiple network requests coded. I use caddy to redirect the urls from the petitions to my local running environment. Everything was working fine until some CORS restrictions were added to the code. It seems the specific problem is that my localhost is using http instead of the expected https requests by caddy.
4. Error messages and/or full log output:
Access to XMLHttpRequest at 'http://localhost:8000/my_url' from origin 'https://localhost' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
5. What I already tried:
I have modified my caddyfile multiple times in an effort for it to allow CORS.
I also installed Moesif CORS chrome extension but no luck.
Lastly I tried disabling https requests adding auto_https off in my caddyfile
