Azure Function App 未从静态 Web 应用程序连接到 SQL 数据库 - 500 内部服务器错误

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

我正在尝试让静态 Web 应用程序通过 Azure 函数应用程序中的 HTTP 触发器与 SQL 数据库进行通信。

当我尝试在网站上提交表单时，收到 500 内部服务器错误。这是浏览器控制台的错误：

----------
POST
script.js:14
https://totallyfunfunctionapp.azurewebsites.net/api/HttpTrigger1?
net::ERR_ABORTED 500 (Internal Server Error)
(anonymous) @ script.js:14
----------
script.js:36
Error: Error: Network response was not ok Internal Server Error
at script.js:23:19
----------

前端代码托管在 GitHub 上并部署到 Azure。

网络应用程序很简单：带有提交按钮的单行文本输入。我的目标是将输入的文本存储在 SQL 数据库中。

这是我正在使用的前端 JavaScript：

document.getElementById('submitButton').addEventListener('click', function() {
    var textInput = document.getElementById('textInput').value;
    var result = document.getElementById('result');

    // URL of your Azure Function
    const functionUrl = 'https://totallyfunfunctionapp.azurewebsites.net/api/HttpTrigger1?';

    // Create the request body
    const requestBody = {
        textInput: textInput
    };

    // Make the request to your Azure Function
    fetch(functionUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestBody)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.text(); // Use text() to handle non-JSON responses
    })
    .then(text => {
        try {
            const data = JSON.parse(text); // Parse the text response as JSON
            result.textContent = 'Data received: ' + JSON.stringify(data);
        } catch (error) {
            result.textContent = 'Error parsing JSON: ' + error.message;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        result.textContent = 'Error: ' + error.message;
    });
});

这是 Function App HTTP 触发器的代码：

const sql = require('mssql');

const config = {
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    server: process.env.DB_SERVER,
    database: process.env.DB_NAME,
    options: {
        encrypt: true,
        trustServerCertificate: false
    }
};

module.exports = async function (context, req) {
    context.log('Function execution started');
    
    try {
        await sql.connect(config);
        const result = await sql.query`SELECT * FROM Entries`;

        context.res = {
            status: 200,
            body: result.recordset.length > 0 ? result.recordset : { message: 'No data found' },
            headers: {
                'Content-Type': 'application/json'
            }
        };

    } catch (err) {
        context.log.error('Error encountered:', err);

        context.res = {
            status: 500,
            body: JSON.stringify({ error: `Error connecting to database: ${err.message}` }),
            headers: {
                'Content-Type': 'application/json'
            }
        };
    }
};

我已将 Function App 可能的出站 IP 地址添加到数据库的防火墙规则中。

我刚开始将 Azure Functions 与数据库集成，并尝试寻找解决方案，但没有任何运气。任何有关可能出现问题的指导或资源将不胜感激！

node.js azure azure-functions azure-sql-database azure-http-trigger
1个回答
0
投票

关于错误

POST 500 (Internal Server Error)
，您应该检查服务器日志或浏览器中的控制台日志。在尝试您的代码时，我遇到了 CORS 错误，如下图所示：

errror Output

要解决此问题，请将以下内容添加到您的 本地设置文件 

local.settings.json
：

{
  "IsEncrypted": false,
  "Values": {
      "AzureWebJobsStorage": "UseDevelopmentStorage=true",
      "FUNCTIONS_WORKER_RUNTIME": "node"
  },
  "Host": {
      "CORS": "*"
  }
}

此外，在 Azure 中函数应用的 CORS 选项卡中添加上述 URL 的 CORS 设置：

Cors In Azure

确保将 

index.html
放入 
src
文件夹中。

我参考了这个 MSDOC 来使用 Azure Static Web Apps 构建静态站点，不使用 framework:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Hello.css">
    <title>Submit Form</title>
</head>

<body>
    <main>
        <h1>Submit Form</h1>
        <input type="text" id="textInput" placeholder="Enter text">
        <button id="submitButton">Submit</button>
        <p id="result"></p>
    </main>

    <script src="script.js"></script>
</body>

</html>

请参阅此 MSDOC 了解 Azure 静态 Web 应用 CLI 配置。

本地输出：

Local Output

带有 Out API 的 Yml 文件：

app_location: "./src" 
 api_location: ""
 output_location: "."

我参考了此 MSDOC，在不使用框架的情况下将 API 添加到具有 Azure Functions 的 Azure 静态 Web 应用程序。

带有 API 本地化的 Yml 文件：

app_location: "./src" 
 api_location: "./api"
 output_location: "."

有关静态Web App中的YAML工作流程配置，请参阅此SO。

Azure 静态 Web 应用程序输出：

Azure Static Web App Output

Azure SQl 数据示例表视图：

Azure SQl Data Sample Table View

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