1.背景
我们做的一个小型项目,包含了一个小型的直播。这个直播是别人提供直播源和点播源的,所以不需要我们对直播源困扰。
在直播这边主要实现是通过前端进行实现的。最初我们是想使用一个叫webrtc的,后来又转为video.js。但是又到了考验兼容IE的时候,在使用video.js做IE的兼容时候,表示很难受(只是很好的做到了兼容IE11,之后遇到了一点难处,当然可能是我和我的小伙伴们太菜了),最后再次放弃了video.js,改用了百度基于video.js封装的(嗯,好像是这样的,如果有误还望指出)cyberplayer.js,较为友好的解决了兼容问题。
之后我们以为解决了所有问题了,但是,问题又出现了!
因为厂家是不提供https协议的直播源的,只提供http协议直播源,而我们网站是上了https的(我觉得网站在上线应该上甚至必须上https的)。这个时候问题来了,我们必须将直播页面降级到http。
好吧,通过nginx的重定向,成功的降级到http。这时候以为一切OK了,谁知道!他妈的!在直播页面需要获取登录态(也就是有没有登录),结果!他妈的!http和https跨域。我又鼓捣了两个点,现在都搞定了,现在记录下来,供以后学习。
2.直播插件介绍
这个没有过多的说的,前端主要也不是我搞的。最开始用的是video.js
,这个已经能满足大部分的需求了,但是IE兼容到9有点麻烦,所以选择了现在使用的cyberplayer.js
.
3.Nginx配置https
首先说明,配置https是需要证书的,这个可以去下载免费的,在阿里云和腾讯云都可以下载。但是阿里云和腾讯云下载的稍微有点区别,后缀名不一样。
腾讯云下载的:
1_zjp1029.cn.bundle.crt
2_zjp1029.cn.key
阿里云下载的:
15316643392032.pem
15316643392032.key
同样都是有一个key的,这里截图说明一下腾讯云是怎么申请免费的证书的。
OK,下面来说一下Nginx配置SSL证书,也就是https
3.1 https设置
找到server标签,或者重新写一个
server {
listen 443 ssl; #ssl是因为我配两个域名是443端口,一个正常访问域名,一个static的静态域名,如果只有一个则不需要
server_name static.zjp1029.cn
#接下来是ssl的配置
ssl_certificate 1534374937514.pem;
ssl_certificate_key 1534374937514.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; #按照这个套件配置
ssl_prefer_server_ciphers on;
#location的配置
location / {
proxy_pass http://127.0.0.1:8080; #映射实际工程部署地址和端口
#Proxy Settings
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
········
·······
//其他配置
}
3.2 80端口重定向
SSL这样配置就可以了,但这样只是确定了443端口,要知道域名不加端口号默认访问的都是80端口,现在我们需要将80端口重定向到443端口,有两种写法,版本低一点的采用rewrite的写法,版本高点的使用return写法,当然在高版本的Nginx中, rewrite写法也是完全可以的。很简单的几行配置,如下:
server {
listen 80;
server_name zjp1029.cn
#可以直接在这里重定向
rewrite ^(.*) https://$host$1 permanent;
#return 写法
#return https://zjp1029.cn$request_uri
#####或者在location下写
location / {
return https://zjp1029.cn$request_uri
}
}
3.3 将直播的url将为http
直播的url降级为http分为两个部分,一个是https部分将直播url重定向,一个是http部分不进行重定向。开始我想的很复杂,用if去判断,其实完全不需要,利用location就可以了
#https重定向到http
server {
listen 443 ssl;
······
#其他配置不叙述
location /broadcast { #直播的url以broadcast开头
return http://zjp1029.cn$request_uri;
}
location / { #其他的路径
#与之前的配置一样
}
}
server {
#http直播url不重定向
listen 80;
······
#其他配置不叙述
location /broadcast {
proxy_pass http://127.0.0.1:8080; #映射实际工程部署地址和端口
#Proxy Settings
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location / {
#像之前设置的那样进行重定向
}
}
4.解决跨域问题
到此为止,https的配置以及部分url的降级已经完全OK了,如果直播页面只是个直播观看,那么久都搞定了。但是,因为直播页面要获取登录态,所以现在已经出现了跨域问题,要解决这个问题。
4.1 SpringBoot中的跨域
因为项目的后台使用的是springBoot来开发的,所以配置跨域没有使用Filter的方式,Filter配置解决跨域的问题我之前有写过。所以先要在springBoot这边完成跨域允许的配置,代码如下:
@Configuration
public class CorsConfig {
//跨域配置
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("http://zjp1029.cn");
corsConfiguration.addAllowedOrigin("http://zjp1029.cn");
corsConfiguration.addAllowedOrigin("https://zjp1029.cn");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.setAllowCredentials(true);
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
在springBoot中加入以上代码,关于添加哪些域名可以访问,你进入源码就可以查看到,里面是一个ArrayList,所以这种设置就能正确的添加。
4.2 ajax中发送请求添加
在发送ajax请求时候,添加一个配置项:
xhrFields:{withCredentials:true}
,
4.3 Nginx配置允许跨域
http {
#将允许跨域的域名写入变量
map $http+origin $corsHost {
default 0;
"~http://www.zjp1029.cn" http://www.zjp1029.cn;
"~https://www.zjp1029.cn" https://www.zjp1029.cn
}
#在server中设置跨域
server {
add_header Access-Control-Allow-Origin $corsHost;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header Access-Control-Allow-Credentials true;
}
}
到此为止,跨域的设置就全部完成了,在这里顺嘴提一句,设置上传文件大小和访问时间的配置。
在springBoot中设置上传文件大小配置,在application.yml或者application.properties中
spring.servlet.multipart.max-file-size = 500Mb
spring.servlet.multipart.max-request-size = 500Mb
Nginx配置上传文件大小,在http下
client_max_body_size 500M;
Nginx配置响应时间
keepalive_timeout 720;
client_header_timeout 720s;
client_body_timeout 720s;
client_body_buffer_size 256k;
proxy_connect_timeout 360s;
proxy_read_timeout 300s;
---------------------------------end---------------------