Hi Caddy again,
1. The problem I’m having:
This time I am trying to enable the CORS on my caddy server. To make this easy I will put the last help url in here then I can go directly to my issue without explain how I have configured my caddy server on digitalocean. so here is the link
So in this case I am trying integrate payment gateway here so it’s calling to third party service. When I call this third party service I am getting CORS issue like this on browser console
2. Error messages and/or full log output:
payhere.js:1 Access to XMLHttpRequest at 'https://www.payhere.lk/pay/checkoutJ' from origin 'https://www.chemmyfashion.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
payhere.js:1 POST https://www.payhere.lk/pay/checkoutJ net::ERR_FAILED 500
Main Caddy server logs :
{
"level": "info",
"ts": 1693734625.087928,
"logger": "http.log.access.log3",
"msg": "handled request",
"request": {
"remote_ip": "108.162.226.219",
"remote_port": "12996",
"proto": "HTTP/2.0",
"method": "POST",
"host": "www.chemmyfashion.com",
"uri": "/api/orders/validate/productAvailabilityAndUpdateStockCount",
"headers": {
"Cf-Ipcountry": [
"SG"
],
"Cf-Visitor": [
"{\"scheme\":\"https\"}"
],
"Accept": [
"application/json, text/plain, */*"
],
"Content-Type": [
"application/json"
],
"Referer": [
"https://www.chemmyfashion.com/order/cb38a0da-e349-432a-b784-08d558e367ec"
],
"Accept-Language": [
"en-US,en;q=0.9,ja;q=0.8"
],
"Sec-Fetch-Dest": [
"empty"
],
"Cf-Ray": [
"800d169dcaf744b5-SIN"
],
"Content-Length": [
"68"
],
"Sec-Ch-Ua-Mobile": [
"?0"
],
"Authorization": [],
"Sec-Ch-Ua-Platform": [
"\"macOS\""
],
"Origin": [
"https://www.chemmyfashion.com"
],
"Cdn-Loop": [
"cloudflare"
],
"Cf-Connecting-Ip": [
"121.6.238.133"
],
"Accept-Encoding": [
"gzip"
],
"X-Forwarded-For": [
"121.6.238.133"
],
"X-Forwarded-Proto": [
"https"
],
"Sec-Ch-Ua": [
"\"Chromium\";v=\"116\", \"Not)A;Brand\";v=\"24\", \"Google Chrome\";v=\"116\""
],
"User-Agent": [
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
],
"Sec-Fetch-Site": [
"same-origin"
],
"Sec-Fetch-Mode": [
"cors"
],
"Priority": [
"u=1, i"
]
},
"tls": {
"resumed": false,
"version": 772,
"cipher_suite": 4865,
"proto": "h2",
"server_name": "www.chemmyfashion.com"
}
},
"user_id": "",
"duration": 0.061443056,
"size": 17,
"status": 200,
"resp_headers": {
"Etag": [
"W/\"11-l8wg2b6ZqrDsZYSOZdfjskF4jXM\""
],
"X-Powered-By": [
"Express"
],
"Content-Type": [
"application/json; charset=utf-8"
],
"Access-Control-Allow-Credentials": [
"true"
],
"Access-Control-Expose-Headers": [
"*"
],
"Content-Length": [
"17"
],
"Server": [
"Caddy",
"Caddy"
],
"Alt-Svc": [
"h3=\":443\"; ma=2592000"
],
"Date": [
"Sun, 03 Sep 2023 09:50:25 GMT"
],
"Access-Control-Allow-Origin": [
"https://www.chemmyfashion.com"
]
}
}
Frontend application Caddy Server logs :
{
"level": "info",
"ts": 1693734625.0873108,
"logger": "http.log.access.log0",
"msg": "handled request",
"request": {
"remote_ip": "172.18.0.2",
"remote_port": "34762",
"proto": "HTTP/1.1",
"method": "POST",
"host": "www.chemmyfashion.com",
"uri": "/api/orders/validate/productAvailabilityAndUpdateStockCount",
"headers": {
"Cf-Visitor": [
"{\"scheme\":\"https\"}"
],
"Priority": [
"u=1, i"
],
"Referer": [
"https://www.chemmyfashion.com/order/cb38a0da-e349-432a-b784-08d558e367ec"
],
"Sec-Ch-Ua-Mobile": [
"?0"
],
"Sec-Fetch-Dest": [
"empty"
],
"User-Agent": [
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
],
"Accept-Encoding": [
"gzip"
],
"Cf-Ipcountry": [
"SG"
],
"Content-Type": [
"application/json"
],
"Origin": [
"https://www.chemmyfashion.com"
],
"X-Forwarded-Proto": [
"https"
],
"Content-Length": [
"68"
],
"Cdn-Loop": [
"cloudflare"
],
"Cf-Connecting-Ip": [
"121.6.238.133"
],
"Sec-Ch-Ua": [
"\"Chromium\";v=\"116\", \"Not)A;Brand\";v=\"24\", \"Google Chrome\";v=\"116\""
],
"Sec-Fetch-Mode": [
"cors"
],
"X-Forwarded-For": [
"108.162.226.219"
],
"X-Forwarded-Host": [
"www.chemmyfashion.com"
],
"Accept-Language": [
"en-US,en;q=0.9,ja;q=0.8"
],
"Authorization": [],
"Sec-Ch-Ua-Platform": [
"\"macOS\""
],
"Sec-Fetch-Site": [
"same-origin"
],
"Accept": [
"application/json, text/plain, */*"
],
"Cf-Ray": [
"800d169dcaf744b5-SIN"
]
}
},
"user_id": "",
"duration": 0.060187539,
"size": 17,
"status": 200,
"resp_headers": {
"Access-Control-Expose-Headers": [
"*"
],
"Etag": [
"W/\"11-l8wg2b6ZqrDsZYSOZdfjskF4jXM\""
],
"Access-Control-Allow-Origin": [
"https://www.chemmyfashion.com"
],
"Content-Length": [
"17"
],
"X-Powered-By": [
"Express"
],
"Access-Control-Allow-Credentials": [
"true"
],
"Server": [
"Caddy"
],
"Content-Type": [
"application/json; charset=utf-8"
],
"Date": [
"Sun, 03 Sep 2023 09:50:25 GMT"
]
}
}
3. Caddy version:
I am running caddy on docker compose
version is caddy:2.4.6
4. How I installed and ran Caddy:
I am using docker and docker-compose to install and run the program.
a. System environment:
OS: Linux server
Docker version: 3
b. Command:
docker-compose -f docker-compose.yml up
c. Service/unit/compose file:
PASTE OVER THIS, BETWEEN THE ``` LINES.
Please use the preview pane to ensure it looks nice.
d. My complete Caddy config:
1 Main Caddy Server
2 Frontend applications run inside the Caddy server
My main caddy server Caddyfile configure like this
(cors) {
@cors_preflight{args.0} method OPTIONS
@cors{args.0} header Origin {args.0}
handle @cors_preflight{args.0} {
header {
Access-Control-Allow-Origin "{args.0}"
Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
Access-Control-Allow-Headers *
Access-Control-Max-Age "3600"
defer
}
respond "" 204
}
handle @cors{args.0} {
header {
Access-Control-Allow-Origin "{args.0}"
Access-Control-Expose-Headers *
defer
}
}
}
www.chemmyfashion.com:443 {
log {
output file /var/log/caddy/chemmyfashion-vp-frontend.log
format json
}
tls treblesolution@gmail.com
import cors https://www.chemmyfashion.com
reverse_proxy chemmy-fashion-vp-frontend:80
}
And frontend application Caddyfile configured like this
(cors) {
@cors_preflight{args.0} method OPTIONS
@cors{args.0} header Origin {args.0}
handle @cors_preflight{args.0} {
header {
Access-Control-Allow-Origin "{args.0}"
Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
Access-Control-Allow-Headers *
Access-Control-Max-Age "3600"
defer
}
respond "" 204
}
handle @cors{args.0} {
header {
Access-Control-Allow-Origin "{args.0}"
Access-Control-Expose-Headers *
defer
}
}
}
:80 {
log {
output file /var/log/caddy/frontend.log
format json
}
tls treblesolution@gmail.com
import cors https://www.chemmyfashion.com
root * /srv
route {
reverse_proxy /api* chemmy-fashion-vp-backend:5300
try_files {path} {path}/ /index.html
file_server
}
}
5. Links to relevant resources:
My previous question if in case you need to refer my whole caddy server configuration
If you can goto until payment page and click the payhere button in browser console you can see the issue.
One more thing I need to double check with you is this the optimum CORS enable way because this is way i got when google it. and why it’s not working in my case.
Thank you