📅  最后修改于: 2023-12-03 14:44:35.669000             🧑  作者: Mango
使用Nginx反向代理时,在传递CSS资源时可能会出现未正确加载的情况,从而导致页面样式错误。
CSS资源将在nginx中被代理,而如果在CSS中使用相对路径,则nginx将无法找到它们,因为代理后,CSS资源的路径将变为反向代理的主机名/路径/文件名。
使用绝对路径,或在CSS中使用root来指定基本路径。例如:
background-image:url('/images/background.jpg');
或
background-image:url('http://proxy.example.com/images/background.jpg');
或
background-image:url('http://proxy.example.com/images/background.jpg');
background-image:url('/images/fallback.jpg');
此外,如果代理的目标是HTTPS,还需要使用scheme和proxy_set_header将协议和主机名传递给代理。例如:
location / {
proxy_pass https://backend.example.com;
proxy_set_header Host $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;
}
在传递CSS资源时,使用绝对路径或root来指定基本路径,同时使用scheme和proxy_set_header将协议和主机名传递给代理,可以避免CSS资源未正确加载的问题。