当我尝试将数据添加到我的 SQL 数据库时，我的 Azure Web 应用程序（Linux）出现问题，以下是我收到的错误：DataAdd.js:26 POST https://website.azurewebsites.net:5000/add-data...

我在尝试将数据添加到我的 sql 数据库时遇到了 Azure Web 应用程序（Linux）的问题

以下是我遇到的错误：

DataAdd.js:26 
POST https://website.azurewebsites.net:5000/add-data net::ERR_CONNECTION_TIMED_OUT

Error: TypeError: Failed to fetch
    at handleSubmit (DataAdd.js:26:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1

WebSocketClient.js:13 WebSocket connection to 'wss://website.azurewebsites.net:8080/ws' failed:

这是我的 DataAdd.js 代码：

import React, { useState } from 'react';
import './DataAdd.css';

const DataAdd = () => {
  const [formData, setFormData] = useState({
    description: '',
    Nimi: '',
    Syntymäaika: '',
    Rotu: '',
    Sukupuoli: '',
    Rekisterinumero: '',
    Omistaja: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch('https://website.azurewebsites.net:5000/add-data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
      if (response.ok) {
        alert('Data added successfully');
        setFormData({
          description: '',
          Nimi: '',
          Syntymäaika: '',
          Rotu: '',
          Sukupuoli: '',
          Rekisterinumero: '',
          Omistaja: ''
        });
      } else {
        alert('Error adding data');
      }
    } catch (error) {
      console.error('Error:', error);
      alert('Error adding data');
    }
  };

  return (
    <div>
      <h1>Add Data</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Description</label>
          <input type="text" name="description" value={formData.description} onChange={handleChange} required />
        </div>
        <div>
          <label>Nimi</label>
          <input type="text" name="Nimi" value={formData.Nimi} onChange={handleChange} required />
        </div>
        <div>
          <label>Syntymäaika</label>
          <input type="date" name="Syntymäaika" value={formData.Syntymäaika} onChange={handleChange} required />
        </div>
        <div>
          <label>Rotu</label>
          <input type="text" name="Rotu" value={formData.Rotu} onChange={handleChange} required />
        </div>
        <div>
          <label>Sukupuoli</label>
          <input type="text" name="Sukupuoli" value={formData.Sukupuoli} onChange={handleChange} required />
        </div>
        <div>
          <label>Rekisterinumero</label>
          <input type="text" name="Rekisterinumero" value={formData.Rekisterinumero} onChange={handleChange} required />
        </div>
        <div>
          <label>Omistaja</label>
          <input type="text" name="Omistaja" value={formData.Omistaja} onChange={handleChange} required />
        </div>
        <button type="submit">Add Data</button>
      </form>
    </div>
  );
};

export default DataAdd;

这是我的 server.js 代码：

require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const sql = require('mssql');

const app = express();
const port = process.env.REACT_APP_AZURE_SERVER_PORT;

const config = {
    user: process.env.REACT_APP_AZURE_SQL_USER,
    password: process.env.REACT_APP_AZURE_SQL_PASSWORD,
    server: process.env.REACT_APP_AZURE_SQL_SERVER,
    port: parseInt(process.env.REACT_APP_AZURE_SQL_PORT, 10),
    database: process.env.REACT_APP_AZURE_SQL_DATABASE,
    authentication: {
        type: 'default'
    },
    options: {
        encrypt: true,
        requestTimeout: 60000,
        connectionTimeout: 30000
    }
};

// Add CORS middleware
app.use(cors({
    origin: 'https://website.azurewebsites.net', // Adjust based on your frontend URL
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    preflightContinue: false,
    optionsSuccessStatus: 204
}));

// Add body parser middleware
app.use(express.json());

async function connectWithRetry() {
    let retries = 5;
    while (retries) {
        try {
            const pool = await sql.connect(config);
            return pool;
        } catch (err) {
            console.log(`Connection failed, retries left: ${retries - 1}`);
            console.error(err);
            retries -= 1;
            await new Promise(res => setTimeout(res, 5000)); // wait for 5 seconds before retrying
        }
    }
    throw new Error('Could not connect to the database after multiple attempts');
}

connectWithRetry().then(pool => {
    console.log("Connected to the database");

    app.post('/add-data', async (req, res) => {
        try {
            console.log('Received request:', req.body);
            const { description, Nimi, Syntymäaika, Rotu, Sukupuoli, Rekisterinumero, Omistaja } = req.body;

            console.log('Connecting to database...');
            const result = await pool.request()
                .input('description', sql.NVarChar, description)
                .input('Nimi', sql.NVarChar, Nimi)
                .input('Syntymäaika', sql.Date, Syntymäaika)
                .input('Rotu', sql.NVarChar, Rotu)
                .input('Sukupuoli', sql.NVarChar, Sukupuoli)
                .input('Rekisterinumero', sql.NVarChar, Rekisterinumero)
                .input('Omistaja', sql.NVarChar, Omistaja)
                .query(`
                    INSERT INTO dbo.hevoset (description, Nimi, Syntymäaika, Rotu, Sukupuoli, Rekisterinumero, Omistaja)
                    VALUES (@description, @Nimi, @Syntymäaika, @Rotu, @Sukupuoli, @Rekisterinumero, @Omistaja)
                `);

            console.log('Data added:', result);
            res.status(200).send('Data added successfully');
        } catch (err) {
            console.error('Error adding data:', err);
            res.status(500).send('Error adding data');
        }
    });

    app.listen(port, () => {
        console.log(`Server running on port ${port}`);
    });
}).catch(err => {
    console.error('Database connection failed: ', err.message);
});

我已经尝试过：已验证的服务器正在运行：服务器正在运行并且日志表明它正在监听正确的端口。

检查 URL 和端口：确保 React fetch 调用中的 URL 和端口与服务器的 URL 和端口匹配。

配置的 CORS：设置 CORS 选项以允许来自客户端 URL 的请求。

使用 curl/Postman 测试端点：从 curl/Postman 直接向服务器端点发出请求没有任何问题。

在本地进行了测试，数据库连接正常，添加数据也正常。

添加日志记录：添加日志记录以捕获传入的请求和错误。

我的期望：我希望 React 应用程序发出的 POST 请求能够成功到达 SQL Server，从而将数据添加到 Azure SQL 数据库。

环境：客户端：托管在 Azure (Linux) 上的 React Web 应用程序服务器：托管在 Azure 上的 SQL 服务器数据库：Azure 上的 SQL 数据库