nginx代理tomcat导致css或js加载失败

Web开发

Web服务器经常会使用nginx作前置路由，在使用nginx配置Web服务器负载均衡、动静分离，会碰到设置反向代理后导致前端资源无法加载的问题

nginx反向代理的tomcat服务器导致前端资源css或js加载失败大概可以分为：端口丢失、真实ip或端口获取错误、js或者css太大加载失败等情形

端口丢失

反向代理获取真实ip（域名）、端口、协议

nginx反向代理后，servlet应用通过request.getRemoteAddr()取到的IP是nginx的IP，并非客户端的真实IP；通过request.getRequestUrl()获取的ip（域名）、端口、协议都是nginx对应的参数。

  • 比如nginx的配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
http {
    upstream backend {
        server 127.0.0.1:8080;
        #server backend1.example.com wight=5;
        #server 127.0.0.1:8080 max_fails=3 fail_timeout=30s;
        
        #server backup1.example.com backup;
    }
    
    server {
        listen 80;
        server_name your.domain.com;
        
        location /test {
            proxy_pass http://backend/test;
        }
        ...
    }
}

在浏览器打开http://your.domain.com/test访问servlet应用，获取客户端IP和URL：

1
2
3
log.info("RemoteAddr:{}, URL:{}", request.getRemoteAddr(), request.getRequestURL());
//输出结果
RemoteAddr:127.0.0.1, URL:http://127.0.0.1:8080/test

  • 针对tomcat+nginx的解决方案：

    nginx添加如下配置,：

    1
    2
    3
    4
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    如果不知道如何添加，可参考nginx转发丢失端口的问题。添加完后，输出结果如下：

    1
    2
    //输出结果
    RemoteAddr:127.0.0.1, URL:http://浏览器的ip地址/test

    发现RemoteAddr仍然获取不正确，解决方案如下：

    • 方案一：通过request.getHeader("X-Forwrad-For")或request.getHeader("X-Real-IP")获取到nginx配置的Header。

    • 方案二： 配置tomcat，通过Servlet API的request.getRemoteAddr()方法获取客户端的IP。Tomcat的server.xml，在Host元素内最后加入：

      1
      <Valve className="org.apache.catalina.valves.RemoteIpValve" />

    JS或css无法完全加载

    nginx的代理缓存区，默认较小导致部分文件出现加载不全的问题，比较典型的如jQuery框架，可以通过配置调整nginx的缓存区即可。

    最终完整配置如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    http {
        # http_proxy 
        proxy_buffer_size 128k;
        proxy_buffers 32 128k;
        proxy_busy_buffers_size 128k;
        
        upstream backend {
            server 127.0.0.1:8080;
        }
        
        server {
            listen 80;
            server_name your.domain.com;
            
            location /test {
                proxy_pass http://backend/test;
                # proxy_params
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
            }
            ...
        }
        ...
    }

    关于nginx的http_proxy模块参数含义：

    http_proxy模块

  • 参考链接：

分享到