nginx做tomcat代理出现css或js静态资源加载失败 4000 或加载一半的问题

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

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

端口丢失

之前笔者也有文章单独介绍，可参考http://flyflyfish.com/2018/02/24/nginx%E8%BD%AC%E5%8F%91%E4%B8%A2%E5%A4%B1%E7%AB%AF%E5%8F%A3%E9%97%AE%E9%A2%98/

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

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

• 比如nginx的配置：

[code]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：

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

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

nginx添加如下配置,：

[code]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转发丢失端口的问题。添加完后，输出结果如下：

[code]//输出结果
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元素内最后加入：

[code]<Valve className="org.apache.catalina.valves.RemoteIpValve" />

JS或css无法完全加载

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

最终完整配置如下：

[code]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模块参数含义：