首页 >后端开发 >Golang >nixOS 上的 Nginx 反向代理在尝试加载 css/js 时返回 404

nixOS 上的 Nginx 反向代理在尝试加载 css/js 时返回 404

王林转载: 2024-02-10 13:09:07627浏览

php小编百草介绍，当在nixOS上使用Nginx反向代理时，有时会遇到一个问题：尝试加载css/js时返回404错误。这个问题可能会导致网站的样式和功能无法正常显示。为了解决这个问题，我们需要检查Nginx的配置和文件路径是否正确，并确保代理服务器能够正确访问和加载所需的静态资源。通过仔细排查和调试，我们可以解决这个问题，确保网站的正常运行。

问题内容

我已经设置了 nixos 来运行 nginx 作为 docker 容器的反向代理。在docker容器中运行一个golang服务器，它使用函数处理/，并从两个文件夹static和js返回文件。它在端口 8181 上运行。其代码如下所示：

func main() {
        static := http.fileserver(http.dir("static"))
        js := http.fileserver(http.dir("js"))
        http.handle("/static/", http.stripprefix("/static/", static))
        http.handle("/js/", http.stripprefix("/js/", js))
        // register function to "/"
        http.handlefunc("/", indexhandler)
        fmt.println("server is starting...")
        err := http.listenandserve("0.0.0.0:8181", nil)
        if err != nil {
                log.fatal("cannot listen and server", err)
        }
        
}
func indexhandler(w http.responsewriter, r *http.request) {
        wd, err := os.getwd()
        var static = filepath.join(wd, "static")
        var index = filepath.join(static, "index.html")
        if err != nil {
                log.fatal("cannot get working directory", err)
        }

        // check if the request is an options preflight request
        if r.method == "options" {
                // respond with status ok to preflight requests
                w.writeheader(http.statusok)
                return
        }

        // post-request
        if r.method == http.methodpost {
              // do something
        } else {
                // loading the index.html without any data
                tmpl, err := template.parsefiles(index)
                err = tmpl.execute(w, nil) // write response to w
                if err != nil {
                        http.error(w, err.error(), http.statusinternalservererror)
                        log.fatal("problem with parsing the index template ", err)
                }

        }
}

我的应用程序的结构如下所示。

├── web
│   ├── dockerfile
│   ├── go.mod
│   ├── server.go
│   └── static
│   │   ├── index.html
│   │   ├── style.css
│   │   └── table.html
│   └── js
│       └── htmx.min.js

configuration.nix 中 nginx 部分的配置如下所示。

  services.nginx = {
    enable = true;
    recommendedGzipSettings = true;
    recommendedOptimisation = true;
    recommendedProxySettings = true;
    recommendedTlsSettings = true;
    virtualHosts."myapp" = {
      sslCertificate = "/etc/ssl/nginx/ssl.cert";
      sslCertificateKey = "/etc/ssl/nginx/ssl.key";
      sslTrustedCertificate = "/etc/ssl/nginx/ssl.chain";
      forceSSL = true; # Redirect HTTP to HTTPS
      locations = {
        "/myapp" = { proxyPass = "http://localhost:8181/"; };
      };
      extraConfig = ''
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      '';
    };

  };

当我寻址 https://server/myapp 时，index.html 将加载，但 style.css 和 htmx.min.js 将返回 404。

当使用端口 8181 而不是 url (http://server:8181) 寻址容器时，一切都会照常加载。

我希望nginx将加载css和js的请求重定向到容器。

编辑： 确切的错误是： get https://server.name/static/style.css net::err_aborted 404 即使我正在访问 https://server.name/myapp。

另一个重要信息是，我想通过同一个反向代理以这种方式运行多个容器。因此，将 als css- 或 js-files 定向到同一位置将不起作用。css- 或 js-files 定向到同一位置将不起作用。

解决方法

请检查 index.html

解决方法

请检查

文件中的 css/js 引用。您很可能通过绝对路径引用它们，如下所示：/myapp

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/static/style.css" />
    <script src="/js/htmx.min.js"></script>
  </head>
</html>

快速修复方法是将它们替换为相对路径：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./static/style.css" />
    <script src="./js/htmx.min.js"></script>
  </head>
</html>

index.html这种方法很容易出错。更好的方法是修改应用程序以在

处提供内容：

http.handle("/myapp/static/", http.stripprefix("/myapp/static/", static))
http.handle("/myapp/js/", http.stripprefix("/myapp/js/", js))
http.handlefunc("/myapp/", indexhandler)

并修改

文件中的引用路径：/myapp/

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/myapp/static/style.css" />
    <script src="/myapp/js/htmx.min.js"></script>
  </head>
</html>

然后修改nginx配置：🎜

locations = {
  "/myapp/" = { proxyPass = "http://localhost:8181/myapp/"; };
};

🎜通过这种方法，无论是否使用反向代理，web 应用程序将始终在 uri 🎜 上提供服务，这应该使其易于维护。🎜

以上是nixOS 上的 Nginx 反向代理在尝试加载 css/js 时返回 404的详细内容。更多信息请关注PHP中文网其他相关文章！

php golang nginx css html Static JS docker http https

声明：

本文转载于：stackoverflow.com。如有侵权，请联系admin@php.cn删除

上一篇：格式化 Azure SDK 的 golang 时间下一篇：golang 中合并排序的递归/并行实现中出现死锁

查看更多