Question

我有一个在 localhost:8080 本地运行的 Hello World 前端/vuejs 应用程序

我还使用以下配置在本地运行 nginx：

/etc/nginx/conf.d/default.conf

server {

        listen 8089;
        listen [::]:8089;

        server_name localhost;
        location / {
             proxy_pass http://localhost:8080/;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_set_header X-Forwarded-Port $server_port;
        }
}

正如预期的那样，我还可以在 localhost:8089 处通过 nginx 访问我的前端应用程序：

现在我想在 localhost:8089/frontend 下访问它，并查看了 nginx 重写规则：

https://www.nginx.com/blog/creating-nginx-rewrite-rules/

我已经更新：/etc/nginx/conf.d/default.conf：

server {
        listen 8089;
        listen [::]:8089;

        server_name localhost;

        location /frontend {
             rewrite /frontend(.*) /$1  break;
             proxy_pass http://localhost:8080/;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_set_header X-Forwarded-Port $server_port;
        }
}

但是当我使用上面的新配置重新启动 nginx 时，我只会在浏览器中看到空白页面：http://localhost:8089/frontend:

所以我的重写有些不正确。

我也尝试使用 curl，它通过 nginx 和不使用 nginx 都提供 200：

curl -v http://localhost:8080/frontend（没有nginx）

$ curl -v http://localhost:8080/frontend
*   Trying 127.0.0.1:8080...
* Connected to localhost (127.0.0.1) port 8080 (#0)
> GET /frontend HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.74.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Accept-Ranges: bytes
< Content-Type: text/html; charset=UTF-8
< Content-Length: 778
< ETag: W/"30a-73T3k5LDbAo8lePJzzKFsycD26w"
< Date: Tue, 03 Aug 2021 08:10:22 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< 
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="favicon.ico">
    <title>my-app-vuejs</title>
  <link href="js/app.js" rel="preload" as="script"><link href="js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but my-app-vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="js/chunk-vendors.js"></script><script type="text/javascript" src="js/app.js"></script></body>
</html>
* Connection #0 to host localhost left intact

curl -v http://localhost:8089/frontend（使用 nginx）

$ curl -v http://localhost:8089/frontend
*   Trying 127.0.0.1:8089...
* Connected to localhost (127.0.0.1) port 8089 (#0)
> GET /frontend HTTP/1.1
> Host: localhost:8089
> User-Agent: curl/7.74.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Server: nginx/1.21.1
< Date: Tue, 03 Aug 2021 08:10:32 GMT
< Content-Type: text/html; charset=UTF-8
< Content-Length: 778
< Connection: keep-alive
< X-Powered-By: Express
< Accept-Ranges: bytes
< ETag: W/"30a-73T3k5LDbAo8lePJzzKFsycD26w"
< 
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="favicon.ico">
    <title>my-app-vuejs</title>
  <link href="js/app.js" rel="preload" as="script"><link href="js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but my-app-vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="js/chunk-vendors.js"></script><script type="text/javascript" src="js/app.js"></script></body>
</html>
* Connection #0 to host localhost left intact

所以不太确定如何调试。有什么建议吗？

为 vuejs 应用程序重写的 Nginx 路径在浏览器中无法按预期工作

0 个答案: