☰

nginx 将查询参数附加到 React 应用程序

tag-icon • tag-icon nginx rewrite querystring
nginx 将查询参数附加到 React 应用程序

我是 Nginx 新手，我想将查询参数附加到 URL（例如 myid）以便为 React 应用程序提供服务。我使用的是 nginx/1.18.0（Ubuntu）

还有类似的问题，例如：

将查询参数附加到特定 URI

但我找不到解决问题的方法。

React 通常创建静态内容，因此使用“try_files”元素（指向/index.html）似乎合乎逻辑。

这是配置文件

server {
  listen 9999 ssl default_server;
  listen [::]:9999 ssl default_server;

  ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    
  ssl_certificate        /keystores/mycert.crt.pem;         ## 
  ssl_certificate_key    /keystores/mycert.key.pem;         ## 
  ssl_client_certificate /keystores/.npm.certs.pem;         ## CA Bundle
  ssl_verify_client on;

  root /home/edu/my-react-app;

  index index.html;

  server_name _;
  error_log /home/edu/log/nginx_log debug;

  #Append query param (trying different flags)
  rewrite ^(/login)$ $1?myid=LAST last;
  #rewrite ^(/login)$ $1?myid=NO_FLAG ;
  #rewrite ^(/login)$ $1?myid=BREAK break;
  #rewrite ^(/login)$ $1?myid=REDIRECT redirect;
  #rewrite ^(/login)$ $1?myid=PERMANENT permanent;


  location / {
    try_files $uri $uri/  /index.html =404; # Redirect to index.html of the "static" react application!!!
  }
}

我尝试了所有 5 个标志重写选项，结果如下：

无标志、最后标志和中断标志：日志文件指出已将查询参数添加到 URL，但新 URL 未出现在浏览器地址栏中，并且应用程序找不到此查询参数。

重定向和永久标志：在日志文件中，它指出查询参数已多次添加到 URL 中，并且新的 URL（查询参数重复多次）出现在浏览器地址栏中，但是浏览器抱怨它已被重定向多次。

将“rewrite”语句放入“location”语句不起作用。

有什么想法吗？谢谢

答案1

如果你想反应要查看查询参数，您需要使用redirect或permanent。 的其他模式rewrite是 Nginx 内部的。请参阅文档rewrite​。

为了防止重定向循环，您需要将其包装rewrite...redirect在一个if块内。例如：

location / {
    try_files $uri $uri/ /index.html =404;
}
location = /login {
    if ($arg_myid = "") {
        rewrite ^ /login?myid=xxx redirect;
    }
    try_files /index.html =404;
}

看这种警告if在一个块内使用location。

相关内容