nginx配置https访问正常,资源http的无法访问

Question

网站配置了https访问,使用http访问资源图片正常,js,css使用http无法访问?为什么?

nginx 的配置

Answer 1

较新的浏览器，访问一个https页面
如果这个页面引用了http的资源，除了图片外，所有其他资源，包括css, js，都会拒绝加载

所以，你需要把引用的http资源，改为https协议

Answer 2

如果在一个 https 页面里动态的引入 http 资源，比如引入一个 js 文件，会被直接 block 掉的。不过如果您的网站同时准备了 https 资源和 http 资源，那么可以使用相对协议实现当网站引入的都是 http 资源，网站域名更换为 https 后的无缝切换。

具体使用方法为：

<img src="//img.alicdn.com/tps/TB1GzMJLXXXXXXoXXXXXXXXXXXX-183-129.png">

以下是淘宝做法：

Answer 3

https 站点引用 http资源 ，只有图片可以加载，其它资源是不会被加载的

Answer 4

如果有使用nginx做代理，可以在转发请求的时候添加一个Content-Security-Policy的头，并将这个头的值设置为upgrade-insecure-requests，来将http请求转为https。

example line:

add_header Content-Security-Policy upgrade-insecure-requests;

完整样例

server {
        listen 443;
        server_name demo.thatscode.com;

        ....
        省略ssl 相关配置
        ....

        location / {

            ....
            省略其他proxy参数
            ....
            proxy_pass http://pool_demo;
            add_header Content-Security-Policy upgrade-insecure-requests;
        }
        access_log  /www/logs/demo.thatscode.com.log;
        error_log   /www/logs/demo.thatscode.com.error;
}