I'm going crazy over a trivial issue I've encountered.
My socket.io/express app is deployed on Digital Ocean using Docker setup.
To enable https, I'm utilizing Caddy within my Docker setup for automatic https.
I've been attempting to connect to this setup through my domain and from my local React app residing on localhost:3000. However, I keep encountering the following error:
The CORS policy is blocking access to the XMLHttpRequest at '' from origin 'http://localhost:3000'. This occurs because the 'Access-Control-Allow-Origin' header value in the response cannot be '*' when the request's credentials mode is 'include'. The withCredentials attribute controls the credentials mode of requests initiated by the XMLHttpRequest.
I've explored numerous solutions on SO, but none seem to resolve the issue.
- I've tweaked the options of the cors middleware
- I've added custom middleware with specific headers
- I've attempted using localhost:3000 as the origin
- ...
Unfortunately, nothing seems to work. I'm at a loss for what else I can do to rectify this problem.
Any guidance would be greatly appreciated.
Here's how my docker-compose file appears:
version: '3.6'
services:
media-server:
build:
dockerfile: Dockerfile
context: ./
ports:
- "8080:5000"
expose:
- "5000"
caddy:
image: abiosoft/caddy:0.11.0
depends_on:
- "media-server"
restart: always
ports:
- "80:80"
- "443:443"
volumes:
- /root/Caddyfile:/etc/Caddyfile
- /root/.caddy:/root/.caddy
My Caddyfile configuration is detailed below:
https://mediaserver.domain.dev {
proxy / http://media-server:8080 {
websocket
transparent
}
cors
}
And here's how my server setup code looks like:
import cors from 'cors';
import express from 'express';
import socket from 'socket.io';
import { intialiseWebSocketConnection } from './socketio';
const app = express();
app.use(cors());
const server = app.listen(5000, function () {
console.log('Server is connectedd on *:5000');
});
const io = socket.listen(server);
intialiseWebSocketConnection(io);