Nginx 反向代理配置 - 404 未找到

Question

I have deployed a react app on a remote server (digital ocean), and I want to be able to access the localhost of the server from the react app client-side.我已经在远程服务器（数字海洋）上部署了一个 React 应用程序，我希望能够从 React 应用程序客户端访问服务器的本地主机。

I have tried setting up a reverse proxy with Nginx, however I am getting an awful 404.我试过用 Nginx 设置反向代理，但是我得到了一个可怕的 404。

The site is deployed, https://www.jonasgroenbek.com .该站点已部署， https://www.jonasgroenbek.com 。 The problem occurs under the game sections when you choose either rock, scissor or paper and then the button to fight the AI.当您选择石头、剪刀或纸，然后选择与 AI 战斗的按钮时，会在游戏部分下出现问题。

This is my sites-enabled inside of the Nginx这是我在 Nginx 中启用的站点

server {
  root /var/www/jonasgroenbek.com/build;
  index index.html;
  server_name jonasgroenbek.com  www.jonasgroenbek.com;
  location / {
    try_files $uri $uri/ =404;
  }
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/jonasgroenbek.com/fullchain.pem; # managed b$
    ssl_certificate_key /etc/letsencrypt/live/jonasgroenbek.com/privkey.pem; # managed$
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
location /game {
        rewrite /game/(.*)  /$1 break;
        proxy_pass http://localhost:1234;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
server {
    if ($host = www.jonasgroenbek.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = jonasgroenbek.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name jonasgroenbek.com  www.jonasgroenbek.com;
    return 404; # managed by Certbot
}

this is the port and path the node.js express service is listening on:这是 node.js express 服务正在侦听的端口和路径：

app.listen(PORT,  function(){
console.log(`listening on port:${PORT}...`)
})

app.get("/game/play/:choice", function(req,res){
    pythonProcess = spawn('python',["./script.py", req.params.choice]);
    pythonProcess.stdout.on('data', function(data) {
    res.status(200).send(data.toString('utf-8'))})
})

this is how i fetch from the react app这就是我从反应应用程序中获取的方式

fetch(`104.248.28.88/game/play/rock`)

Is the problem to detect, because I am slowly losing my sanity.是要检测的问题，因为我正在慢慢失去理智。

EDIT编辑

I have tried on both我都试过

fetch("104.248.28.88/game/play/rock")

which yields this error message: Game.js:46 GET https://jonasgroenbek.com/jonasgroenbek.com/game/play/rock 404 (Not Found)产生此错误消息： Game.js:46 GET https://jonasgroenbek.com/jonasgroenbek.com/game/play/rock 404 (Not Found)

and fetch("jonasgroenbek.com/play/rock")并fetch("jonasgroenbek.com/play/rock")

which yields this error message:这会产生此错误消息：

Game.js:46 GET https://jonasgroenbek.com/jonasgroenbek.com/game/play/rock 404 (Not Found)

Trying to access it with postman through尝试通过邮递员访问它

jonasgroenbek.com/game/play/rock

gives following error message:给出以下错误信息：

<html>
    <head>
        <title>404 Not Found</title>
    </head>
    <body bgcolor="white">
        <center>
            <h1>404 Not Found</h1>
        </center>
        <hr>
        <center>nginx/1.14.0 (Ubuntu)</center>
    </body>
</html>

Answer 1

The issue is that you're using the IP address instead of the domain you have set on server_name directive.问题是您使用的是 IP 地址，而不是您在server_name指令上设置的域。 So instead of using that site configuration, it's going to the default Nginx configuration.因此，不是使用该站点配置，而是使用默认的Nginx配置。

Try:尝试：

fetch('https://jonasgroenbek.com/game/play/rock')

You can also drop:您还可以删除：

    rewrite /game/(.*)  /$1 break;

Nginx 反向代理配置 - 404 未找到

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-03-09 16:43:34

Nginx 反向代理配置 - 404 未找到

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-03-09 16:43:34

解决方案1
1 已采纳 2019-03-09 16:43:34