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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,657评论 18 139
  • 原文地址:原文地址 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义...
    C_Y大渔阅读 1,259评论 1 13
  • 什么是跨域? 2.) 资源嵌入:、、、等dom标签,还有样式中background:url()、@font-fac...
    电影里的梦i阅读 2,372评论 0 5
  • 文 / 清蓝 1 // 她总有一针见血的能力,戳中别人心中最不想被人戳破的地方 // 以前,我有一个同事。 表面看...
    作者清蓝阅读 954评论 2 6
  • 这个世界有一种花,它的名字叫做曼珠沙华。传说,当它在地狱开放时,将会唤起路过的已亡者的记忆,打开人们心底的记忆之匣...
    點下阅读 1,768评论 3 35