Http与Https跨域的session共享

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的，这里截图说明一下腾讯云是怎么申请免费的证书的。

image.png
image.png

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---------------------