带有 nginx 的 Gatsby - 重定向被破坏 - 尾随 /（斜杠）

Posted 2023-02-24

【中文标题】带有 nginx 的 Gatsby - 重定向被破坏 - 尾随 /（斜杠）

【英文标题】：Gatsby with nginx - redirect is broken - trailing / (slash)

【发布时间】：2021-12-25 16:31:52

【问题描述】：

我的 gatsby 网站重定向到斜杠，然后再次重定向回非斜杠。

nginx 配置文件：

server 
    listen 80;
    listen [::]:80;

    server_name example.com www.example.com;
    return 301 https://$server_name$request_uri;


server 
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    include snippets/ssl-example.com.conf;
    include snippets/ssl-params.conf;

    server_name example.com;
    return 301 https://www.$server_name$request_uri;


server 
      listen 443 ssl http2;
        listen [::]:443 ssl http2;
        include snippets/ssl-example.com.conf;
        include snippets/ssl-params.conf;

        root /var/www/example.com/html;

        index index.html index.htm index.nginx-debian.html;

        server_name www.example.com;

        location ~ /.well-known 
                allow all;
        

        location / 
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        

        location ~* \.(?:html)$ 
          add_header Cache-Control "public, max-age=0, must-revalidate";
        

        location = /sw.js 
          add_header Cache-Control "public, max-age=0, must-revalidate";
        

        location /page-data 
          add_header Cache-Control "public, max-age=0, must-revalidate";
        

        location /static 
          add_header Cache-Control "public, max-age=31536000, immutable";
        

        location ~* \.(?:js|css)$ 
          add_header Cache-Control "public, max-age=31536000, immutable";
        

    error_page  404  /404.html;

当我打开带有斜杠的网站时，我看到重定向到相同的 URL，但没有斜杠：

example.com/hello-world/ -> example.com/hello-world

这是预期的行为。

但是当我打开没有斜杠的网站时，我看到重定向到斜杠，然后再次重定向到没有斜杠。

example.com/hello-world -> example.com/hello-world/ -> example.com/hello-world

这不应该发生。我的配置哪里出错了？非常感谢任何帮助。

【问题讨论】：

我在您的配置中看不到任何会导致重定向“预期行为”的内容。 /etc/nginx/conf.d 或 /etc/nginx/nginx.conf 中是否还有其他可能导致重定向的 nginx 配置文件？也许你的 ssl sn-ps 文件中有一些东西？您确定它是服务器端 3xx 重定向，而不是基于您的 hello-world 内容的客户端重定向吗？尾部斜杠重定向通常是由于我在您的配置中没有看到的 nginx rewrite 造成的。

与我 VM 上其他文件中的重定向无关。我在本地启动了我的网站，但看不到这种行为。在本地，它只是按预期从hello-world/ 重定向到hello-world。

"在本地，它只是按预期从 hello-world/ 重定向到 hello-world。"为什么会这样？我在你的配置中没有看到这个。

我猜这就是 Gatsby.js 代表我所做的。

是的，好的。我没有看到您的 nginx 配置有任何问题（无论如何都与重定向有关）。我怀疑您的问题出在 gatsby.js 方面。您的帖子中没有足够的信息来帮助您。

【参考方案1】：

nginx

Nginx 关于斜线的行为记录在 here。

如果位置由以斜杠结尾的前缀字符串定义 字符，并且请求由 proxy_pass 之一处理， fastcgi_pass、uwsgi_pass、scgi_pass、memcached_pa​​ss 或 grpc_pass， 然后进行特殊处理。响应请求 URI 等于此字符串，但没有尾部斜杠，a 带有代码 301 的永久重定向将返回到请求的 带有斜杠的 URI。如果不希望这样做，则完全匹配 URI 和位置可以这样定义：

location /user/ 
    proxy_pass http://user.example.com; 


location = /user 
    proxy_pass http://login.example.com; 

这不适用于您，因为您没有使用 CGI 或上游应用服务器...您只是在提供文件（如果我理解正确的话）。

我不是 gatsby 专家，但来自您评论中的 link...

Gatsby 的效果更好、更流畅、更干净（等等），带有斜线

有各种各样的 nginx 配置来自那些在 Gatsby 中成功使用它们的人。例如这里是one。

与您最相关的部分是......

将不包含. 或? 且不以/ 结尾的路径重定向到相同的路径但尾随/。

例如将/foo/bar 重定向到/foo/bar/，但不要与/foo/bar.ext 或/fo.o/bar 或/foo/bar?hello 混淆。

rewrite ^([^.\?]*[^/])$ $1/ permanent

尝试按以下优先顺序提供请求的 URI 解释它：

原样（文件路径） 作为目录 作为包含index.html文件的目录 如果以上都不是有效的，最后是 404 错误

try_files $uri $uri/ $uri/index.html =404;

盖茨比

从你发布的 gatsby issue link 他们说：

在<Link> 组件的所有用法和/或navigate() 的调用中明确使用尾部斜杠

和

安装gatsby-plugin-force-trailing-slashes。尽管 Gatsby 默认在其自己的命名目录中生成静态 html 页面，但此插件强制每个页面的路径值以 / 结尾——这对于在构建时配置核心 Gatsby @reach/router 至关重要。

然后最终重建 gatsby 站点，因为其中一些配置仅在构建时产生影响。