nginx中配置https的服务页面中引用http资源问题

最新推荐文章于 2024-08-21 00:14:09 发布
原创 最新推荐文章于 2024-08-21 00:14:09 发布 · 置顶 · 5.7k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#nginx #https #add_header

本文讲述了在使用nginx配置https代理后遇到的页面资源加载不全的问题，并给出了通过在location正则匹配里添加Content-Security-Policy头来升级不安全请求的解决方案。


今天在跟同事联调需求的时候，发现他们请求我们的http地址都被强制转换成了https，还好我们用nginx做了负载。在nginx的https模块中配了相应的代理后，请求可以正常转发。但是发现页面显示的资源不全有问题。解决这个问题需要在location 正则匹配里面增加如下：add_header Content-Security-Policy upgrade-insecure-requests;


即如下图：



这样就可以了。

Nginx将https重定向为http进行访问的配置（附Demo）
码农研究僧的博客
05-21 2789
由于网站默认无配置https，但输入网址的时候浏览器默认带https，导致网页一直无法访问
Nginx中配置https服务兼容访问http资源
进阶的蜗牛
09-10 1万+
Nginx中配置https服务兼容访问http资源 简介： HTTPS 是 HTTP over Secure Socket Layer，以安全为目标的 HTTP 通道，所以在 HTTPS 承载的页面上不允许出现 http 请求，一旦出现就是提示或报错： Mixed Content: The page at ‘https://www.taobao.com/‘ was loaded over HTTPS, but requested an insecure image ‘http://g.alicdn.com
nginx实现https与http共存方案
xiaoQ
09-29 5077
同一个链接实现http和https的共同访问，快来看看吧。
在nginx里面解决https请求http资源不可用
weixin_43308554的博客
07-26 1266
在nginx里面解决https请求http资源不可用 add_header Content-Security-Policy upgrade-insecure-requests;你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Com
https页面 和 http请求的问题 汇总
热门推荐
FREEDOM
07-02 1万+
https页面中不能使用http请求，http页面中可以使用https请求。关于在https 页面有一些http的请求，可以在<head></head>中设置<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">来自动升级http到https，就不需要修改源代...
Nginx服务器中配置404错误页面时一些值得注意的地方
09-30
为了确保404页面的静态资源正常加载，你需要在404页面中使用绝对路径引用这些资源，例如： ```html <link rel="stylesheet" href="https://www.slyar.com/css/404.css"> <img src="...
Nginx学习之静态文件服务器配置方法
09-30
然后在Nginx配置中添加认证设置： ```nginx server { ... location / { ... auth_basic "请输入用户名密码"; auth_basic_user_file /usr/local/openresty/nginx/passwd.db; } } ``` 这将要求访问者提供在`...
高性能Web服务器-- Nginx 核心配置详解
m0_63631814的博客
08-21 1384
自定义错误页，同时也可以用指定的响应状态码进行响应, 可用位置：http, server, location, if in locationserver {listen 80;# 自定义一个错误页面!!location = /40x.html{ # 添加自定义错误页面的location# 测试error pageserver {listen 80;-- 自定义错误日志-- 自定义日志!!# 测试。
怎样在 Nginx 中配置防盗链？
技术笔记
07-21 2248
盗链，用通俗易懂的话来说，就是别人未经您的允许，在他们的网站上直接链接到您网站的资源，让访问他们网站的用户可以直接获取您的资源。比如，您的网站上有一张精美的图片，另一个网站通过这样的方式把您的图片展示在他们的页面上，这就是盗链。盗链的危害可不小，它就像一个吸血鬼，会吸干您的服务器资源和带宽。如果盗链的流量过大，可能会导致您的网站变得缓慢甚至无法访问，就像一辆超载的卡车，再也跑不动了。而且，这也侵犯了您的权益，毕竟这些资源是您花费时间和精力准备的。
解决https页面加载http资源报错
前端啤酒屋
08-06 7621
HTTPS（HyperText Transfer Protocol Secure）是一种通过使用SSL/TLS加密通信来保护数据传输的协议，它确保了客户端和服务器之间的安全连接。当HTTPS页面尝试加载非加密的HTTP资源时，如何解决存在的问题？
详解NGINX访问https跳转到http的解决方法
01-20
问题：浏览器打开https://www.jb51.net/aaa.html，然后跳转到//www.jb51.net/aaa.html 网站架构：用户–https—>nginx代理—http—->tomcat/nginx+php nginx待遇发给后端的请求是http协议，后端程序跳转获取到的协议是http，返回一个redirect（http header中带Location://www.jb51.net/aaa.html），浏览器收到location，跳转到了location指定的地方。 解决方法 解决方法1： 在nginx代理中增加一个header，标志用户请求是http还是https，后端
Nginx配置https兼容http
weixin_30741653的博客
06-27 1864
现象 如果一个https站点里面有引用一些http的静态资源，图片可以正常加载，但是js文件、css文件就会加载失败，如下图： 原因 为了解释这个问题，首先要理解一下Mixed Content的概念：HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content（混合内容），不同浏览器对 Mixed Content 有不一样的处理规则。 忽略IE等远古浏览器，我们来看下现...
Nginx部署部分https与部分http【转】
weixin_33695450的博客
06-09 856
转自 Nginx部署部分https与部分http - na_tion的专栏 - 博客频道 - youkuaiyun.comhttp://blog.youkuaiyun.com/na_tion/article/details/17334669 一般而言，大规模的网站都有很多台Web服务器和应用服务器组成，用户的请求可能是经由Varnish，HAProxy，Nginx之后才到应用服务器，中间有好几层。而中小规模的典型部署...
[Nginx] 配置Https后无法访问http资源
weixin_42177572的博客
09-26 2926
Nginx配置https后，http头请求出错
利用Nginx二级域名解决HTTPS引入HTTP致命错误
luoz_java的博客
05-20 1767
这几天搭建了视频解析网站，在搭建的时候发现了解析VIP视频的接口基本都是HTTP协议的，而自己的网站采用的是HTTPS协议（包括HTTP也强制转换为HTTPS）。为了解决这个问题，也考虑了不强转HTTPS，使用HTTP可访问域名+物理地址，但是基于这种方案的安全性考虑，最终选择了二级域名搭建视频解析网站，而域名本身还是强制转为HTTPS。 出现错误 错误主要是在HTTPS网站中引入HTTP的资...
https页面嵌入http资源解决办法（小白文）
weixin_48030265的博客
11-10 7505
d、使用openssl基于server.key私钥生成server.key.unsecure的解密私钥：openssl rsa -in server.key -out server.key.unsecure。b、使用openssl生成私钥（密码都是定义为123456，后面会用到）：openssl genrsa -des3 -out server.key 1024。c、使用openssl根据私钥生成公钥：openssl req -new -key server.key -out server.csr。
nginx反向代理到Https后，请求Http资源报错blocked mixed-content
Honins的博客
03-28 1万+
第一种方法： <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 比如这里我用了bootcss的cdn,但是正常情况下这样写是会报blocked mixed-content错误的。 解决方法： <link rel="stylesheet...
google浏览器访问https网站，http协议的图片无法访问，nginx如何调整才能解决
weixin_42612405的博客
02-12 2282
在访问HTTPS网站时，如果页面中包含HTTP协议的图片，可能会导致访问失败。此时，您可以在NGINX服务器上调整配置，以支持跨协议请求。 首先，您需要安装NGINX的HTTP代理模块，并启用它： http { server { location / { proxy_pass http://upstream; proxy_se...
nginx配置https网页允许访问http资源方法
Volitation小星
08-08 4362
nginx配置https网页允许访问http资源方法 在nginx配置文件中添加下面语句即可 add_header Content-Security-Policy upgrade-insecure-requests;
nginx如何配置https到http的转发
最新发布
07-09
<think>我们正在配置Nginx将HTTPS请求转发到HTTP后端服务。这通常用于保护客户端与Nginx之间的通信（使用HTTPS），而Nginx与后端服务器之间使用HTTP。这种配置可以减轻后端服务器的SSL/TLS处理负担，同时保证数据传输的安全性。 根据引用[1]，Nginx可以作为反向代理，实现负载均衡和请求转发。引用[3]提供了添加头部信息的配置示例，这在代理配置中可能会用到，比如传递一些客户端信息给后端服务器。 配置步骤： 1. 确保Nginx已安装，并且支持SSL模块（通常默认安装的Nginx都包含SSL模块）。 2. 准备SSL证书和私钥文件。我们需要一个有效的SSL证书（可以是购买的，也可以是自签名的）。 3. 配置Nginx监听443端口（HTTPS），并将请求转发到后端的HTTP服务。 示例配置如下： 假设我们有一个后端服务运行在http://backend_server_ip:backend_port（例如http://192.168.0.2:8080），并且我们已经有SSL证书文件（例如：/path/to/certificate.crt）和私钥文件（例如：/path/to/private.key）。 编辑Nginx配置文件（通常位于/usr/local/nginx/conf/nginx.conf或/etc/nginx/nginx.conf，具体取决于安装方式），在http块内添加一个server块： ```nginx server { listen 443 ssl; # 监听443端口，启用SSL server_name your_domain.com; # 替换为你的域名 # SSL证书配置 ssl_certificate /path/to/certificate.crt; # 证书路径 ssl_certificate_key /path/to/private.key; # 私钥路径 # 其他SSL配置（可选，但建议配置以提高安全性） ssl_session_cache shared:SSL:1m; ssl_session_timeout 10m; ssl_protocols TLSv1.2 TLSv1.3; # 推荐使用TLS1.2和1.3 ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location / { # 设置代理，将请求转发到HTTP后端 proxy_pass http://192.168.0.2:8080; # 替换为你的后端服务地址 # 传递一些头部信息给后端，例如客户端真实IP等 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # 告诉后端是https还是http # 根据引用[3]，我们还可以添加自定义头部 add_header X-Via $server_addr; add_header X-Cache $upstream_cache_status; add_header X-Accel $server_name; } } ``` 此外，我们还可以配置将HTTP请求重定向到HTTPS（可选，但推荐）： ```nginx server { listen 80; server_name your_domain.com; return 301 https://$server_name$request_uri; # 永久重定向到HTTPS } ``` 配置完成后，检查配置文件语法是否正确： ``` nginx -t ``` 然后重新加载Nginx配置： ``` nginx -s reload ``` 注意事项： - 如果后端服务器需要知道客户端是通过HTTPS访问的，可以通过设置`X-Forwarded-Proto`头部（如上面配置中的`$scheme`变量）来传递。 - 如果使用自签名证书，客户端（浏览器）会提示不安全，需要手动信任证书。生产环境应使用受信任的证书颁发机构（CA）签发的证书。 - 防火墙需要开放443端口。 引用[1]提到Nginx部署简单，内存消耗少，成本低，因此使用Nginx作为HTTPS到HTTP的代理是合理的选择。 根据引用[5]，如果后端服务是HTTP，那么Nginx配置中直接使用`http://`协议即可。 如果遇到问题，可以查看Nginx的错误日志（通常位于/usr/local/nginx/logs/error.log或/var/log/nginx/error.log）进行排查。 希望这个配置能够帮助您成功实现HTTPS到HTTP的代理转发。</think>### 配置 Nginx 将 HTTPS 请求转发到 HTTP 后端服务 以下是完整的配置步骤和示例： #### 1. **基础配置原理** - 客户端通过 HTTPS 访问 Nginx - Nginx 解密 SSL 流量 - 将请求以 HTTP 协议转发到后端服务 - 后端处理后将 HTTP 响应返回给 Nginx - Nginx 重新加密后通过 HTTPS 返回客户端 #### 2. **核心配置示例** ```nginx server { listen 443 ssl; # 监听 HTTPS 端口 server_name your-domain.com; # SSL 证书配置 ssl_certificate /path/to/fullchain.pem; ssl_certificate_key /path/to/privkey.pem; ssl_protocols TLSv1.2 TLSv1.3; location / { proxy_pass http://backend-server:8080; # 转发到 HTTP 后端 # 关键头部设置 [^3][^5] proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # 告知后端是 HTTPS 请求 # 可选：添加自定义头部 [^3] add_header X-Via $server_addr; add_header X-Accel $server_name; } } # HTTP 重定向到 HTTPS [^5] server { listen 80; server_name your-domain.com; return 301 https://$server_name$request_uri; } ``` #### 3. **关键配置说明** 1. **SSL 证书配置**： - `ssl_certificate`：证书文件路径（通常包含完整证书链） - `ssl_certificate_key`：私钥文件路径 - 证书可通过 Let's Encrypt 免费获取或使用商业证书 2. **代理转发核心指令**： - `proxy_pass http://...`：指定 HTTP 后端地址 - `proxy_set_header`：传递原始请求信息给后端 3. **头部设置重要性**： - `X-Forwarded-Proto`：告知后端原始请求是 HTTPS（关键！） - `X-Real-IP`：传递客户端真实 IP - `Host`：保持原始域名不变 #### 4. **验证与调试** ```bash # 检查配置语法 nginx -t # 重载配置 nginx -s reload # 查看请求日志（验证头部传递） tail -f /var/log/nginx/access.log ``` #### 5. **常见问题解决** - **混合内容警告**：确保后端返回的页面中不包含 `http://` 硬编码资源 - **重定向循环**：检查后端是否错误地重定向到 HTTP - **证书错误**： - 确保证书路径正确 - 合并证书链：`cat cert.pem chain.pem > fullchain.pem` - **连接超时**：检查防火墙是否放行 Nginx 到后端的端口 > 配置要点：Nginx 作为 SSL 终端，需正确处理证书和解密操作，同时通过 HTTP 与后端通信。通过 `X-Forwarded-*` 头部传递原始请求信息是关键 [^3][^5]。 --- ### 相关问题 1. **如何为 Nginx 配置免费的 Let's Encrypt SSL 证书？** 2. **Nginx 代理时如何保持 WebSocket 连接？** 3. **如何配置 Nginx 实现 HTTP/2 支持？** 4. **Nginx 负载均衡到多个 HTTP 后端需要哪些配置？** 5. **如何通过 Nginx 代理解决跨域问题（CORS）？** [^1]: Nginx 反向代理基础概念 [^3]: 头部报文处理与代理配置 [^5]: HTTPS 到 HTTP 代理的简化配置
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值