已部署的 React 前端未與節點后端通信 - Cpanel 配置？

Question

所以我有一個 React 前端和 Node 后端作為我的 api 連接到 mysql 數據庫。 一切都在本地完美運行。

現在我已經部署到了一個 c-panel VPS。

前端加載它應該。
如果我在瀏覽器的地址欄中鍵入帶有路由的 IP 地址，則后端正在偵聽，並按應有的方式打印出數據。

但是，我可以讓它工作，輸入“域名+路由”。 誰能告訴我發生了什么，以及如何正確配置這是 cPanel？ 我花了幾天時間在這個圈子里轉，托管公司的支持根本沒有幫助。

這是一個示例 fetch 調用：

componentDidMount() {
        fetch('/api/clients/all')
            .then(res => {
                if (!res.ok) {
                    throw new Error();
                }
                return res.json();
            })
            .then((result) => {
                this.setState({
                    clients: result.sort((a, b) => a.client.localeCompare(b.client)),
                });
                console.log(result);
            })
            .catch(error => {
                console.log(error);
            })
            .then(
                fetch(`/api/contacts/all`)
                    .then(res => {
                        if (!res.ok) {
                            throw new Error();
                        }
                        return res.json();
                    })
                    .then((result) => {
                        this.setState({ contacts: result });
                        console.log(result);
                    })
                    .catch(error => {
                        console.log(error);
                    })
            );
    }

這是我的服務器文件，其中包含路由....我不明白我的配置哪里出錯了。 我認為它甚至可能是服務器的一些 cpanel 配置，不一定是我的代碼。 任何幫助表示贊賞。

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');

const connection = mysql.createPool({
    connectionLimit: 10,
    host        : 'localhost',
    user        : 'root',
    password    : 'C5pkhi6r12!',
    database    : 'ppr'
});

const app = express();
app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.use(cors());
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

app.get('/api/clients/all', function (req, res) {
    // Connecting to the database.
    connection.getConnection(function (err, connection) {

        // Executing the MySQL query (select all data from the 'handbook' table).
        connection.query("SELECT * FROM clients", function (error, results) {
            // If some error occurs, we throw an error.
            if (error) throw error;

            // Getting the 'response' from the database and sending it to our route. This is where the data is.
            console.log(results);
            res.json(results);
        });
        connection.release();
    });
});

app.get('/api/contacts/all', function (req, res) {
    // Connecting to the database.
    connection.getConnection(function (err, connection) {

        // Executing the MySQL query (select all data from the 'handbook' table).
        connection.query("SELECT * FROM contacts", function (error, results) {
            // If some error occurs, we throw an error.
            if (error) throw error;

            // Getting the 'response' from the database and sending it to our route. This is where the data is.
            // console.log(results);
            res.json(results);
        });
        connection.release();
    });
});


// Starting our server.
app.listen(8080, "0.0.0.0",  () => {
    console.log('Listening on port http://localhost:8080');
});

Answer 1

我可能會遲到回答，但我就是這樣做的。

1. 在反應應用程序中將“主機名”：“https://YOURDOMAIN.XYZ”添加到 package.json。
2. 構建您的反應應用程序，並將其上傳到 public_html
3. 使用 cpanel 的 nodejs 工具。
4. 不要做 app.listen(port, ........)。 只需使用回調或將其app.listen()