当我尝试将数据添加到我的 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 数据库
