📜  nginx proxy_pass 传递 css 资产未加载 - CSS (1)

📅  最后修改于: 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资源未正确加载的问题。