出现错误，与“wss://website.azurewebsites.net:8080/ws”的 WebSocket 连接失败：从 React 向 Azure SQL 服务器发出 POST 请求时

问题描述 投票：0回答：1

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

reactjs sql-server azure express cors
1个回答
0
投票

我什至尝试运行你的代码，但它给了我一个 WSS 和 CORS 错误，在添加时显示相同的空数据。然后按如下方式更改代码：服务器端逻辑存储在下面的后端代码中，我们在其中与数据库、API 端点交互并处理数据。 我配置 CORS 以允许从所有 Url 到后端的请求，如下所示

app.use(cors({
  origin: '*', 
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  preflightContinue: false,
  optionsSuccessStatus: 204
}));

如下所示更改 INSERT 查询以避免 null

  INSERT INTO hevoset (description, Nimi, Syntymäaika, Rotu, Sukupuoli, Rekisterinumero, Omistaja)
      VALUES (?, ?, ?, ?, ?, ?, ?)

后端：

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const mysql = require('mysql2');
const fs = require('fs');

const app = express();
const port = process.env.PORT || 8001;

const config = {
  host: process.env.DB_HOST,
  user: process.env.DB_USER ,
  password:  process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  port: 3306,
  ssl: {
    ca: fs.readFileSync("DigiCertGlobalRootCA.crt.pem")
  }
};


const conn = mysql.createConnection(config);


app.use(cors({
  origin: '*', 
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  preflightContinue: false,
  optionsSuccessStatus: 204
}));
app.use(express.json());


async function connectWithRetry() {
  let retries = 5;
  while (retries) {
    try {
      conn.connect(err => {
        if (err) {
          throw err;
        } else {
          console.log("Connected to the database");
        }
      });
      return;
    } catch (err) {
      console.log(`Connection failed, retries left: ${retries - 1}`);
      console.error(err);
      retries -= 1;
      await new Promise(res => setTimeout(res, 5000)); 
    }
  }
  throw new Error('Could not connect to the database after multiple attempts');
}

connectWithRetry().catch(err => {
  console.error('Database connection failed: ', err.message);
});


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

    const sql = `
      INSERT INTO hevoset (description, Nimi, Syntymäaika, Rotu, Sukupuoli, Rekisterinumero, Omistaja)
      VALUES (?, ?, ?, ?, ?, ?, ?)
    `;

    conn.query(sql, [description, Nimi, Syntymäaika, Rotu, Sukupuoli, Rekisterinumero, Omistaja], (err, results) => {
      if (err) {
        console.error('Error adding data:', err);
        res.status(500).send('Error adding data');
      } else {
        console.log('Data added:', results);
        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}`);
});

前端代码处理后端的用户界面和用户交互。我使用 

axios
连接后端，如下所示：

  const response = await axios.post('http://localhost:8001/add-data', formData);

前端：

import React, { useState } from 'react';
import axios from "axios";
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 axios.post('http://localhost:8001/add-data', formData);
      if (response.status === 200) {
        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;

enter image description here

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.