Nginx报错Mixed Content: The page was loaded over HTTPS, This content should also be served over https

报错信息如下：

Mixed Content: The page at 'https://www.example.com' was loaded over HTTPS, but requested an insecure image ‘http://static.example.com/test.jpg’. This content should also be served over HTTPS.

问题产生原因：

浏览器使用域名https协议访问网站，而静态文件test.jpg使用了http协议，从而产生了混合内容。

解决办法一：

静态文件也用https协议访问，需要在代理的静态nginx上配置ssl证书，域名static.example.com

解决办法二：

网上大多数的解决办法是在前端的head部分加上

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

解决办法三：（推荐）

在不改变前端文件的情况下，在访问入口的nginx上配置解决如下：

server {
        listen       443;
        server_name  www.example.com;
        #charset koi8-r;

        error_log  /logs/nginx/error.log;
        root /var/www/www.example.com;
        index  index.php index.html index.htm;
        ssl on;
        ssl_certificate   cert/test/test.pem;
        ssl_certificate_key  cert/test/test.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        
        # 
        add_header  X-Frame-Options  deny;
        add_header  X-Content-Type-Options  nosniff;
        add_header  X-XSS-Protection "1; mode=block";
        add_header Strict-Transport-Security max-age=86400;
        #关键部分
        add_header Content-Security-Policy "upgrade-insecure-requests;default-src *;script-src 'self' https://static.example.com http://static.example.com 'unsafe-inline' 'unsafe-eval';style-src https://static.example.com http://static.example.com 'self' 'unsafe-inline';frame-src 'self';connect-src 'self';img-src https://static.example.com http://static.example.com data: blob: 'self'";

        #最小配置
        #add_header Content-Security-Policy "upgrade-insecure-requests;";

        location / {
                if (!-f $request_filename){
                        rewrite ^/(.*)$ /index.php?s=$1 last;
                        break;
                }
                limit_except GET POST DELETE PUT {
                        deny all;
                }
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
                        root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ \.php$ {
                        fastcgi_pass   127.0.0.1:9000;
                        fastcgi_index  index.php;
                        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
                        include        fastcgi_params;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        location ~ /\.ht {
                        deny  all;
        }
}

重启nginx后成功解决问题

解决方法四：

# 设置相对url重定向
absolute_redirect off;

Nginx 301跳转踩坑总结 - 掘金