nginx 反向代理时静态资源不显示的问题

最近终于尝试实用了 nginx 来做反向代理。不得不说还是非常方便的，一旦学会之后配置个静态网站真的很快，反向代理 api 接口也没什么问题。就在这时，我在试图反向代理另一个服务器上的网站时遇到了问题。

问题描述如下：

要反向代理的网站位于 a.b.c.d:8888。我按照本地反向代理的配置，就是单纯改了下 ip，因此配置如下

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name www.abc.xyz;

    # SSL
    ssl_certificate /etc/nginx/ssl/www.abc.xyz.pem;
    ssl_certificate_key /etc/nginx/ssl/www.abc.xyz.key;

    # security
    include nginxconfig.io/security.conf;

    # logging
    error_log /var/log/nginx/error.log;

    # reverse proxy
    location / {
        proxy_pass http://a.b.c.d:8888; #在这里配置转发，如果只是api接口那么应该已经完成了才对
        include nginxconfig.io/proxy.conf;
    }

    # additional config
    include nginxconfig.io/general.conf;
}

# HTTP redirect
server {
    listen 80;
    listen [::]:80;

    server_name www.abc.xyz;

    return 301 https://www.abc.xyz$request_uri;
}

但我错了，万万没想到的是这个配置下，首页虽然加载了，但其他静态资源例如 css、js、jpg 等资源都没有加载出来。

百思不得其解，就在我一度要放弃的时候，终于找到了解决方案。

那就是为静态资源再配置一层转发。

    #处理静态资源打不开的情况
    location ~ .*\.(css(\.map)?|js(\.map)?|html|gif|jpg|jpeg|png|bmp|swf|svgz?|ttf|ttc|otf|eot|woff2?|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {#此处配置要转发的主要后缀名
        include nginxconfig.io/proxy.conf;#此文件并非必要，可选
        proxy_pass http://a.b.c.d:8888;  #指定这个资源让这个代理服务器来处理，如在本地，则使用： root /home/wwwroot/paper/;
    }

如果要转发所有类型的文件则直接写成通配符即可

    #转发所有静态资源
    location ~ .*\..*?$ {
        include nginxconfig.io/proxy.conf;
        proxy_pass http://a.b.c.d:8888;
    }

ps：在之后的反向代理配置中也遇到了本地的转发出现某些资源无法转发的情况，原理是一样的，也配置一下就行了。

• 本文作者： 草梅友仁(CaoMeiYouRen)
• 本文链接： https://wp.cmyr.ltd/archives/nginx-reverse-proxy-static-resources-not-displaying
• 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！