Nginx 301 https跳转后出现跨域和混合内容问题 —— 筑梦之路

这篇具有很好参考价值的文章主要介绍了Nginx 301 https跳转后出现跨域和混合内容问题 —— 筑梦之路。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题

在浏览器地址栏敲入url访问静态资源目录时,发现默认跳转到了http协议的地址

Nginx 301 https跳转后出现跨域和混合内容问题 —— 筑梦之路,linux系统运维,nginx,运维

如上图所示,客户端https请求先到达API网关,然后网关将请求通过http协议转发到静态资源服务器。

调出浏览器发现客户端发送的https请求收到了一个301状态码的响应,并且响应头中的Location字段便是跳转到的http协议的地址。

原因分析

HTTP协议中3xx开头的状态响应码都是表示重定向的响应。根据RFC的定义:

301 Moved Permanently

302 Found

303 See Other

307 Temporary Redirect

301是永久重定向。如果使用Nginx作为HTTP服务器,那么当用户输入一个不存在的地址之后,基本上会有两种情况:

1.返回404状态码,

2.返回301状态码和重定向地址。

404 Not Found不做讨论,只说下301 Moved Permanently的处理过程。

首先需要明确的问题是,301重定向在什么情况下会被触发呢?

答案是:

Nginx负责设置301 Moved Permanently状态码。但nginx.conf控制Nginx如何处理301 Moved Permanently状态码! 换句话说,要不要进行页面重定向,和怎么重定向,完全是用户配置的结果! Nginx主动设置301 Moved Permanently状态码只有一种情况,当用户在浏览器输入了一个url地址,末尾部分是一个文件目录且不以斜杠”/“结尾,比如 “www.test.com/index” 。 Nginx没有找到index这个文件,但发现了index是个目录。于是本次访问的返回状态码就会被设置成301 Moved Permanently。

Nginx 301 https跳转后出现跨域和混合内容问题 —— 筑梦之路,linux系统运维,nginx,运维

一般情况下,我们会在nginx.conf中配置absolute_redirect ,server_name_in_redirect和port_in_redirect,以便到达个性化的重定向功能。其中absolute_redirect控制Location url的生成方式。

  • absolute_redirect设置成on,则生成绝对路径作为Location url。
  • absolute_redirect设置成off,则生成相对路径作为Location url。

只有absolute_redirect设置为on时,另外两个配置才会生效。

  • server_name_in_redirect为on时,使用Nginx配置文件中的server_name作为Location url中的host,否则使用用户请求url中的主机名作为host;
  • port_in_redirect设置为on时,使用nginx监听的端口来构造Location url,否则不设置port。

因此,上述三个配置项共同控制了Location url的结果,例如: “Location: http://server_name:port/index/”。 这三项配置的默认值是absolute_redirect=on,server_name_in_redirect=off,port_in_redirect=on。因此默认的Location url将是 “www.test.com/index/” 。

回到最开始的问题,https访问跳转到http的原因便可以梳理清楚了,作为静态资源服务器的Nginx设置了301状态码,并且由于它监听的是80端口和使用http协议,假设浏览器访问 “www.test.com/index” ,那么默认构造的Location url便是 “www.test.com/index/” ,并且API网关会直接将该响应写回给浏览器。浏览器收到301状态码的响应后,解析出响应头的Location值,然后进行跳转。过程如下图所示:

Nginx 301 https跳转后出现跨域和混合内容问题 —— 筑梦之路,linux系统运维,nginx,运维

解决方案

最简便的解决方法便是,设置absolute_redirect为off,构造相对路径作为Location url,示例如下:

server {
        listen 80;
        # 设置相对url重定向
        absolute_redirect off;
        server_name localhost;
        charset utf-8;
        access_log logs/access.log main;
        error_log logs/error.log;

        large_client_header_buffers 4 16k;
        client_max_body_size 300m;
        client_body_buffer_size 128k;

        location / {
            index  index.html;
            root   /var/www/index/;
        }
    }

 这样以后,对于 "www.test.com/index" 的请求,Location响应头的值将等于 /index/。文章来源地址https://www.toymoban.com/news/detail-614305.html

到了这里,关于Nginx 301 https跳转后出现跨域和混合内容问题 —— 筑梦之路的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • nginx http 跳转到https

    改 Nginx 配置文件 在您安装了 SSL 证书之后,您需要修改 Nginx 的配置文件以启用 HTTPS 和 HTTP 自动跳转 HTTPS。 打开 Nginx 配置文件(通常位于 /etc/nginx/nginx.conf ),找到您的网站配置块。在该配置块中添加以下内容: 该配置块包括两个部分: 第一个部分监听 HTTP(端口 80),并

    2024年02月06日
    浏览(48)
  • Nginx配置http跳转https

    Nginx 可通过多种方式实现 http 跳转 https,以下列出各种方式的实现方法。 这是 Nginx 新版本的写法,推荐使用。在 Nginx 80 监听服务上加一行: 完整配置如下: Nginx 老版本的写法,不推荐使用。将 “#http跳转https” 这行修改为: 或 将 “#http跳转https” 这行修改为: 写一个

    2024年02月13日
    浏览(42)
  • vue路由跳转后,刷新指定页面。

            做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数。需要手动刷新之后,才会使用第二次参数。         鉴于时间原因直接使用刷新页面监听路由的方法。在准备跳转的A页面添加路

    2024年02月12日
    浏览(60)
  • nginx配置http强制跳转https

    一、什么是Nginx? Nginx是一个高性能的HTTP和反向代理Web服务器,同时也提供IMAP/POP3/SMTP服务。Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3/SMTP)代理服务器。Nginx的特点是:占有内存少,并发能力强。 Nginx专门为性能优化而开发,性能是最重要的考量,非常

    2024年02月16日
    浏览(45)
  • NGINX 路由配置与参数详解(https配置、跨域配置、socket配置)

    Nginx 是一个高性能的开源Web服务器,也可以用作反向代理服务器、负载均衡器和HTTP缓存。它的设计目标是提供高并发、低内存消耗和高度可伸缩性,使其成为处理大量并发连接的理想选择。 NGINX 基础部分可以参考我这篇文章:NGINX - 高级负载均衡器、Web服务器、反向代理 配

    2024年01月19日
    浏览(32)
  • Nginx如何实现http自动跳转到https

    本文主要介绍了Nginx实现http自动跳转到https,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着微点阅读小编来一起学习学习吧 https是更安全的http,通过http自动跳转https,可以更便于用户使用web。 有几下几个方法可以

    2024年02月11日
    浏览(39)
  • 微信小程序优化多次跳转后卡顿问题

    一、微信小程序多次跳转会产生卡顿的原理 通过wx.navigateTo 跳转,都会出现保留当前页面,打开新的页面机制。 wx.navigateTo不会将旧页面出栈,会将新页面入栈(栈内元素个数增加,栈内元素5个时,不能再跳转)。手机性能好点,可能10次左右才会导致小程序跳转卡顿崩溃。 二

    2024年02月11日
    浏览(105)
  • Nginx配置springboot+vue项目http跳转https

    java生成证书 添加依赖 复制keystore到springboot资源目录,修改application.yml配置  启动项目 nginx配置 开启ssl     重启nginx -s reload 访问localhost:81将跳转到https://localhost/login?redirect=/index  

    2024年02月12日
    浏览(41)
  • vue单页面实现路由跳转后保留原页面数据

    有时候在路由跳转后,返回原页面时需要保留之前的数据,即不销毁页面。 页面的缓存,需要用到vue的内置组件keep-alive,来缓存列表页面,同时配合路由选项来更改页面的数据。 在设置keep-alive缓存的组件中,首次进入组件,会一次调用组件的钩子函数:created -- mounted --ac

    2024年02月15日
    浏览(34)
  • 关于vue路由跳转后的页面不会刷新的解决办法

    做uni项目的时候遇到的情况:1,父组件页面刷新了之后 需要触底加载的子组件能触底加载,否则不能加载。2,子组件不能触底加载,只需要刷新之后就能触底加载。以上的刷新不包括下拉刷新。3. 可能因为包了一层tab页导致跳转进页面没有请求数据的问题。 我的解决办法是

    2024年02月11日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包