我正在制作视频流平台,前端是用React完成的,而提供内容的服务器是nginx http服务器(我们称之为cdn服务器)。
使用 http://cdn.session.com/.. 从 React 应用程序向 CDN 服务器发出请求时。它失败,状态:
405 method not allowed
,控制台中出现错误:Cross-origin request blocked ... (Reason: CORS preflight response did not successed). Status code: 405.
/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
注意,172.19.0.10是cdn服务器的ip地址。
在 nginx 配置中的 CDN 服务器上添加下一个标头:
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';
检查 OPTIONS 请求(失败的请求)的响应标头(在 Firefox 网络控制台中)时,allow-origin: http://session.com 存在。
在每个失败的 OPTIONS 请求上,下一行都会记录在 CDN 服务器上:
172.19.0.1 - - [timestamp] "OPTIONS /live/streamer-0_subsd/index.m3u8 HTTP/1.1" 405 168 "http://session.com/" "browser_version"
仅从浏览器(不是反应应用程序,只需在网址栏中输入)或使用curl或ffplay从终端执行请求(使用任何url,cdn.session.com或ip ...无论什么)时,所有请求都会成功.
也许值得注意:
一切都托管在桥式网络中的 Docker 容器中。
前端应用程序位于单独的容器(名为 frontend.session.com)中,以
npm start
开头(为了更容易开发),然后使用 nginx 代理对前端的每个请求进行代理:
# 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;
}
所以,以上都不是问题。
对于身份验证/授权,我使用超级令牌。
文档指出,如果我想与子域共享身份验证令牌,则在前端的 Session.init 方法中
sessionTokenFrontendDomain
字段应设置为:.some.domain
。
这样令牌将被发送到每个 xyz.some.domain。sessionTokenBackendDomain
归档为相同的值(这看起来更直观,因为我设置了后端的“域模式”)。.session.com
并且cookie确实被发送了。sessionTokenBackendDomain
字段,对 cdn.session.com/...
的请求将再次起作用。