一、架构

我们有的时候会遇到这样的情况，我们的 wordpress 的服务器是提供 http 服务的，我们现在需要在前面添加一个负载均衡，配置用户和负载均衡之间使用 https 协议，负载均衡到 apache 之间使用 http 协议

二、问题

2.1、遇到的问题

如果我们这样设置的话，会导致一些页面不正常，因为 css 文件还有 js 文件会被浏览器拦截，这是因为浏览器为了安全，会拦截 https 页面中的一些 http 链接。

https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content

2.2、造成原因的原理

据我所了解，当 wordpress 会根据用户的请求，返回的文档中包含不同的链接：

  • 如果用户使用 http 访问 wordpress，wordpress 返回的文档中的链接，协议都是 http 的，
  • 如果用户使用 https 访问 wordpress，wordpress 返回的文档中的链接，协议都是 https 的。

我们目前遇到的情况就是，ELB 使用 http 访问 wordpress，所以 wordpress 返回给 ELB 的链接是 http 的，然后返回给浏览器这些链接，浏览器就使用 http 向 ELB，这就导致了上面的问题。

三、解决

我们需要添加一些配置，告诉 wordpress，当用户使用 http 请求的时候，给它返回 https 协议的链接。

3.1、修改 apache 配置文件

修改为如下，添加 http 到 https 的重定向。

<VirtualHost *:80>
...
SetEnvIf x-forwarded-proto https HTTPS=on

RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI}
...

3.2、对于 nginx 配置文件

修改为如下，添加 http 到 https 的重定向。

server {
        if ($http_x_forwarded_proto != "https") {
            rewrite  ^/(.*)$  https://$host/$1 permanent;
        }
}

3.2、修改 wordpress 配置文件

修改文件wp-config.php，在最后新增如下内容

if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false)
    $_SERVER['HTTPS']='on';

这段很重要，他告诉 wordpress 用户使用的 https，请返回的链接协议使用 https，避免返回 http 链接而被浏览器 blocked 掉。

https://community.bitnami.com/t/aws-load-balencer-is-configured-for-https-but-app-receives-http-requests/51228/12