时间戳

首页 > 解决方案 > MERN 堆栈 - 连接 - 404 - NGINX

node.js - MERN 堆栈 - 连接 - 404 - NGINX

问题描述

调用 API 时 -http://agendamento.descopromo.tk/api/users/login我收到错误 404，此调用是由反应客户端对后端节点进行的。我不知道问题出在哪里，我对这个主题知之甚少。

当我使用时，curl curl -d "param1 = value1 & param2 = value2" -X POST http://agendamento.descopromo.tk/api/users/login我会从验证中得到响应{"email": "Email field is required", " password ":" Password field is required "} root @ ip-172-31-39-198

返回节点 Server.js

app.listen(PORT,  function() {
    console.log("Server is running on Port: " + PORT);
});

NGINX 改变

server {
  listen 80;
  listen [::]:80;
# server_name _;
  # Use below this if you need custom domain
  server_name agendamento.descopromo.tk;
  location / {
    # Connect front react
    proxy_pass http://127.0.0.1:3000;

}

    location ~* ^/api {
        # node api
        proxy_pass http://127.0.0.1:4000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_send_timeout 2m;
        proxy_read_timeout 2m;
    }
}

 netstat -plant | grep 4000
tcp        0      0 127.0.0.1:4000          0.0.0.0:*               LISTEN      11718/node
tcp        0      0 127.0.0.1:33112         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33126         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33130         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33124         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33122         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33114         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33110         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33116         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33118         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33128         127.0.0.1:4000          TIME_WAIT   -
tcp        0      0 127.0.0.1:33120         127.0.0.1:4000          TIME_WAIT   -```

标签： node.jsreactjsnginx

解决方案

在您的问题中，您是说您通过连接到您的 API，http://localhost:4000/api/users/login但是您添加了 nginx 配置，该配置将您的节点应用程序放在/api路由下的端口 80 后面。您还有两个节点应用程序在端口 3000 和 4000 上运行。

我假设您正在为在端口 4000 上运行的应用程序而苦苦挣扎？

               ┌───────┐                        
               │       │    ┌──────────────────┐
               │       │ ┌─▶│Node app port 3000│
┌───────┐      │       │ │  └──────────────────┘
│ React │─────▶│ NGINX │─┤                      
└───────┘      │       │ │  ┌──────────────────┐
               │       │ └─▶│Node app port 4000│
               │       │    └──────────────────┘
               └───────┘

在没有更多信息的情况下，让我展示一下完整设置的样子：

你的反应应用

import { useState } from 'react';

export function App() {
    const [user, setUser] = useState('');

    const handleLogin = async (event) => {
        event.preventDefault();

        const response = await fetch('http://yourdomain.tld/api/login', {
            //                         ^-- This address is likely different in prod vs staging
            //                         Note that this request does NOT go to port 4000 but to port 80 and requires nginx to run
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ user }),
        });
        const data = await response.json();

        console.log(data);
        // handle your react app response here
    };

    return (
        <form onSubmit={handleLogin}>
            <input type="text" value={user} onChange={(event) => setUser(event.target.value)} />
            <button type="submit">Login</button>
        </form>
    );
}

您的快递应用

const express = require('express');

const app = express();
const port = 4000;

app.post('/api/login', function (req, res) {
    res.send('Got a POST request');
});

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
});

你的 nginx 配置

server {
    listen 80;
    server_name _;

    location / {
        # Connect other node app on port 3000
    }

    location /api/ {
        proxy_redirect          off;
        proxy_pass_header       Server;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Scheme $scheme;
        proxy_set_header        Host $http_host;
        proxy_set_header        X-NginX-Proxy true;
        proxy_connect_timeout   5;
        proxy_read_timeout      240;
        proxy_intercept_errors  on;

        proxy_pass              http://127.0.0.1:4000;
    }
}

如果您在本地运行此设置并且不运行 nginx（这是 likley），那么您的反应应用程序将不得不从http://localhost:4000/api/users/login. 但是，在服务器上运行 nginx 时，您必须将其切换为http://yourdomain.tld/api/login. 使用环境变量进行切换。

推荐阅读