I am making video streaming platform, frontend is done in React, while the server serving content is nginx http server (let's call it cdn server).
When doing request from the react app to the cdn server using http://cdn.session.com/... it fails with status: 405 method not allowed
, and error in console: Cross-origin request blocked ... (Reason: CORS preflight response did not successed). Status code: 405.
The strange thing is if (instead of http://cdn.session.com) I use http://172.19.0.10 or http://session.com/live (which will nginx proxy pass to the actual cdn server) or even http://some.domain.com (also mapped to the actual ip of cdn server in /etc/hosts) the request will be successful.
Content of the /etc/hosts:
172.19.0.10 some.domain.com
172.19.0.10 cdn.session.com
127.0.0.1 session.com
127.0.0.1 localhost
Note, 172.19.0.10 is the ip address of cdn server.
On the cdn server in nginx configuration next headers are added:
add_header Access-Control-Allow-Origin 'http://session.com' always;
add_header Access-Control-Allow-Credentials 'true' always;
add_header Access-Control-Allow-Headers 'Origin,Content-Type,rid,Cookie,st-auth-mode';
add_header Access-Control-Allow-Methods 'GET, OPTIONS';
When inspecting response header (in firefox network console) for the OPTIONS request (the one that fails) allow-origin: http://session.com is present.
On each failed OPTIONS request next line is logged on cdn server:
172.19.0.1 - - [timestamp] "OPTIONS /live/streamer-0_subsd/index.m3u8 HTTP/1.1" 405 168 "http://session.com/" "browser_version"
When doing the request (with any url, cdn.session.com or ip ... whatever) just from browser (not react app, just typing it in url bar) or using curl, or ffplay from terminal all requests will be successful.
Maybe worth noting:
Everything is hosted in docker containers in one bridge type network.
Frontend app is in separate container (named frontend.session.com) started with npm start
(for easier development) and then every request to frontend is proxy-ed using nginx proxy with:
# React Frontend path.
location ~ ^/(.*) {
proxy_pass http://frontend.session.com/$1$is_args$args;
# Required for webSocket connetions (react will create them)
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
So, none of the above was the problem.
For authentication/authorization I'am using Supertokens.
Documentation states that if I want to share auth tokens with subdomains, in Session.init method on the frontend
sessionTokenFrontendDomain
field should be set to:.some.domain
. This way tokens will be sent to every xyz.some.domain.I did that, but I also set undocumented
sessionTokenBackendDomain
filed to the same value (which looked more intuitive since I'am setting the 'domain pattern' of the backend).Anyway these two were set to
.session.com
and cookies were indeed sent.By removing
sessionTokenBackendDomain
field altogether the requests tocdn.session.com/...
are working again.