wordpress https 配置静态文件无法展示问题解决

本解决方法亲测有效，使用nginx转发解决，无需修改wordpress内部functions.php之类的代码。

nginx配置修改如下

worker_processes  1;

events {
    worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  client_max_body_size 20m;

  server {
      listen 443 ssl;
      server_name xxx;  #修改为自己的域名

      root /var/www/html;
      index index.php index.html;
      ssl_certificate   cert/xxx.crt;   #修改为自己的证书地址
      ssl_certificate_key  cert/xxx.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;

      location / {
          add_header Content-Security-Policy upgrade-insecure-requests;
          proxy_pass http://xxx:8000/;#修改为自己服务的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;

  }
  server {
      listen 80;
      server_name xxx;  #修改为自己的域名
      rewrite ^(.*)$ https://$host$1 permanent;
  }
}

先聊聊这个配置的作用吧。第一个server配置监听80端口，server_name写上自己的域名或ip。

server_name 指令用于指定与服务器块匹配的域名或 IP 地址。它通常用于定义虚拟主机，使单个服务器能够托管多个网站。

rewrite ^(.*)$ https://$host$1 permanent; 这段也是比较关键的代码，通过rewrite命令进行请求重定向。将原请求原封不动的直接转发到https协议。这个^(.*)$正则一定要注意别写多了。我之前从网上找了一个带斜杆的^\(.*)$导致部分页面就打不开了。

第一server很简单，其实就是把请求重定向到https。这样，我们网站的所有直接请求就都是走443端口的https协议了。为什么这里强调了下直接？这个后面再说。我们继续下一个server。

这个server监听443端口，server_name配置的和上一个一样就行。后面一大串是https相关的私钥等配置，替换自己的就行，也没什么特别的。重点是location配置。

 add_header Content-Security-Policy upgrade-insecure-requests;
 proxy_pass http://xxx:xx/;#修改为自己的真是服务ip地址:端口号

这俩配置是核心，我们上文有提到第一个server配置会将所有的直接请求转发到https协议下，那么，什么是非直接请求呢？就是我们请求的页面中还带着很多依赖的css、js等静态文件。这些文件默认也是http协议的，走的80端口。这就会导致，当我们直接请求的网页是https的，而要加载http的静态资源时，浏览器会禁止我们加载，导致页面虽然打得开，但是是没有js和css布局的，因为这些文件没法下载下来，打开console可以看到如下的加载报错：This request has been blocked; the content must be served over HTTPS。

而add_header Content-Security-Policy upgrade-insecure-requests;，的作用，简单的讲就是我们访问了直接请求后，浏览器知道是https请求，就会将页面后续依赖的内容也都转成https请求。这样就解决了依赖的静态文件无法加载展示的问题。

然后再说proxy_pass http://xxx:xx/;#修改为自己的真是服务ip地址:端口号，这里需要配置成自己服务的真是ip:端口号，这个地址要注意，最好是配置成当前宿主机的内网ip。这样请求就可以直接通过内部网络转发执行。
当然，也可以配置成外网ip和端口，不过，这时就需要同时将宿主机防火墙对应的服务端口打开，否则会访问不了。

通过上面的配置，就可以完成nginx对https请求的转发和响应，静态文件也能顺利的通过https请求的方式加载了。我的网站目前就是通过这个配置文件配置的。