如何修復 err_http_headers_sent

Question

我嘗試修復一個錯誤： [ERR_HTTP_HEADERS_SENT]: 發送到客戶端后無法設置標頭，但我不知道該怎么做。 我嘗試了很多可能性，但它們都沒有奏效，或者我錯誤地使用了這些解決方案。

• 服務器.js

const express = require('express')
const mysql = require('mysql')
const cors = require('cors')
const app = express()

const parser = express.urlencoded({extended:false})
app.use(cors())
app.set('view engine', 'ejs')
app.use(express.static('public'));

const con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "expenseapp"
})
con.connect(err=>{
    if(err)
        throw err;
    console.log('connected!');
    
})

let array = [] 

app.get('/',(req,res)=>{
    res.render('index')
    let queryName = "SELECT * from `expenses`";
    con.query(queryName, (err,res)=>{
        if(err)
            throw err
        res.forEach(element => {
            array.push(element)
        });
    })
    res.json(array)
    
})
app.get('/add', (req,res)=>{
    res.render('add')
})
app.post('/add', parser, (req,res)=>{
    let array = [req.body.product, req.body.cost]
    let sqlquery = "INSERT INTO `expenses` (name, cost) VALUES (?)";
    con.query(sqlquery, [array], (err,res)=>{
        if(err)
            throw err
        console.log("saved new product");
    })
    res.render('add')
})

app.listen(PORT, ()=>console.log(`Server's running on PORT ${PORT}`))

• 應用程序.js

    .then(response => {return response.json()})
    .then(data => console.log(data))
    .catch(err => console.log(err))

目錄順序：

node_modules
public:
___javascripts
   ___app.js
___styles
   ___style.css
views:
___add.ejs
___index.ejs
package-lock.json
package.json
server.js

請告訴我如何解決這個問題。 謝謝 ：）

Answer 1

這個請求處理程序：

app.get('/',(req,res)=>{
    res.render('index')
    let queryName = "SELECT * from `expenses`";
    con.query(queryName, (err,res)=>{
        if(err)
            throw err
        res.forEach(element => {
            array.push(element)
        });
    })
    res.json(array)
    
})

正在調用res.render()和res.json() 。 每個都嘗試發送對請求的響應，而第二個將觸發您報告的錯誤，因為您只能為每個請求發送一個響應。 目前尚不清楚您希望這條路線是什么。 如果要將查詢結果傳遞給模板，則可以執行以下操作：

app.get('/',(req,res)=>{
    const queryName = "SELECT * from `expenses`";
    con.query(queryName, (err,res)=>{
        if (err) {
            console.log(err);
            res.sendStatus(500);
            return;
        }
        res.render('index', res);   // if res isn't already an array, convert it to an array
    });
});

請注意，這里有幾件事做了不同的事情：

1. 在記錄錯誤並發送實際錯誤響應的查詢上添加錯誤處理。 throw err在這里沒有用。
2. 刪除res.json()所以我們只發送一個響應而不是兩個。
3. 使用您的模板調用res.render()並將結果數組傳遞給它，以便模板index可以在生成頁面時使用該數據。
4. 將res.render()移動到我們實際擁有可用數據的數據庫回調中。

如果您打算讓這條路線完成與我在這里編寫的代碼不同的事情，那么請描述這條路線應該做什么。

僅供參考，您不應該使用if(err) throw err; 在任何異步回調中。 這對您沒有任何好處，因為您的任何代碼實際上都無法捕獲任何異步拋出的異常並對其進行智能處理。 您需要在所有異步操作中進行真正的錯誤處理。 編寫代碼時不要跳過這一步。 不要留到以后。 在設計和首次編寫代碼時，將錯誤處理視為主要概念。