Nginx 反向代理和 CSS/JS 元素未显示

Question

我已经搜索过这个网站并发现了与我类似的问题，但我还没有找到与我的设置非常相似的东西。我有一个托管在

mysite.com

上的域名。我想代理此域以显示

example.com/mysite

上托管的内容。我当前的设置可以正确代理

example.com/mysite

，但

example.com

上另一个目录中托管的 CSS 文件、字体和其他脚本元素不会显示。这些文件尝试从

mysite.com/test.css

而不是文件实际所在位置 (

example.com/test.css

) 加载，因此 Chrome 中的网络检查器在尝试加载文件时显示 404 错误。

在 HTML 中，这些文件的链接是相对引用 (

a href='/test.css'

)。我希望避免使用重定向规则，因为我想在地址栏中保留

mysite.com

，并且我不想使用子过滤器，因为这在我的网络服务器上似乎成本高昂。我也不想为每个特定子目录手动创建单独的

location

调用。

我可以做些什么来正确加载其他网站元素吗？

server {
  listen 443 ssl;
  server_name mysite.com;

  ssl_certificate /some/path/fullchain.pem;
  ssl_certificate_key /some/path/privkey.pem;
  ssl_trusted_certificate /some/path/chain.pem;

  location / {
    proxy_pass https://example.com/mysite;
    proxy_set_header Host example.com;

    proxy_ssl_server_name on;
    proxy_ssl_session_reuse on;
  }
}

谢谢！

Answer 1

将此添加到您当前位置块的下方。您正在重定向到 https://exmaple.com/mysite ，它完全忽略下面目录 (/) 中的所有内容。您需要添加另一个位置块来单独代理 CSS。

location ~ \.css {
    proxy_pass https://example.com;
    proxy_set_header Host example.com;

    proxy_ssl_server_name on;
    proxy_ssl_session_reuse on;
    # add_header  Content-Type    text/css;
}