快捷導(dǎo)航

express框架，報(bào)錯(cuò)：“Cannot set headers after they are sent to the client”，解決方法總結(jié) 原創(chuàng)

原創(chuàng) 更新時(shí)間：2023年05月06日 10:56:12 原創(chuàng) 投稿：shichen2014

這篇文章主要介紹了express框架，報(bào)錯(cuò)：“Cannot set headers after they are sent to the client”，解決方法,結(jié)合實(shí)例形式總結(jié)分析了常見(jiàn)的問(wèn)題原因與對(duì)應(yīng)的解決方案,需要的朋友可以參考下

問(wèn)題描述

"Cannot set headers after they are sent to the client" 是由于代碼在發(fā)送響應(yīng)后，嘗試設(shè)置 HTTP 頭而引起的錯(cuò)誤。這意味著函數(shù)已經(jīng)發(fā)送了一個(gè)或多個(gè)響應(yīng)（如 HTTP 響應(yīng)頭、HTTP 正文或 JSON 字符串），然后試圖發(fā)送另一個(gè)響應(yīng)。

問(wèn)題分析

可能是因?yàn)榇a出現(xiàn)了異步回調(diào)并且重復(fù)發(fā)送響應(yīng)或通過(guò)兩個(gè)或更多的代碼路徑向客戶端發(fā)送響應(yīng)導(dǎo)致此錯(cuò)誤。如下所示：

app.get('/example', function(req, res) {
? ? res.send('Hello World!');
? ? res.status(200).json({ message: 'Invalid request' }); // 錯(cuò)誤：不能設(shè)置 header
});

解決方案

要解決該問(wèn)題，您可以確保一段代碼的路經(jīng)僅僅會(huì)發(fā)送一次響應(yīng)，并避免出現(xiàn)重復(fù)響應(yīng)。在異步操作中進(jìn)行響應(yīng)時(shí)，最好使用 Promise 或者 async/await 來(lái)處理控制流程。

另外，也可以通過(guò)返回狀態(tài)碼或自定義錯(cuò)誤消息來(lái)反映錯(cuò)誤，而無(wú)需通過(guò) res.json() 或 res.send() 等方法發(fā)送響應(yīng)，以便避免重復(fù)響應(yīng)和 header 修改。

以下是對(duì)上述問(wèn)題的改進(jìn)示例：

app.get('/example', async (req, res) => {
? try {
? ? const result = await someAsyncOperation();
? ? // 對(duì)結(jié)果進(jìn)行處理，然后將其作為響應(yīng)發(fā)送給客戶端
? ? res.status(200).json(result);
? } catch (error) {
? ? // 發(fā)生錯(cuò)誤時(shí)，返回自定義錯(cuò)誤消息
? ? res.status(500).json({ message: 'Error occurred while processing request' });
? }
});

在這個(gè)示例中，我們使用 async/await關(guān)鍵字來(lái)處理異步操作。如果操作成功完成，將返回一些數(shù)據(jù)，否則，將捕獲異常，并發(fā)送一個(gè)自定義的錯(cuò)誤消息。

最后，我們?cè)谙蚩蛻舳税l(fā)送響應(yīng)時(shí)只發(fā)送一次響應(yīng)。

補(bǔ)充（網(wǎng)上常見(jiàn)的2個(gè)問(wèn)題解決方案）：

1. req-res未形成閉環(huán),把next去掉即可

router.get('/',function(req,res,next){
?? ?console.log("Get a get req");
?? ?res.send("hello lcq!");
?? ?next();
}

2. 異步與同步問(wèn)題：

問(wèn)題描述

NodeJs+express+mongoDB接口中，在循環(huán)中寫(xiě)`res.json`時(shí)會(huì)報(bào)錯(cuò)（Cannot set headers after they are sent to the client）

解決方法

循環(huán)外面定義一個(gè)變量為`false`
在循環(huán)中要寫(xiě)`res.json`的地方讓其變?yōu)閌true`
在循環(huán)外面判斷該變量為`true`時(shí)寫(xiě)`res.json`

具體代碼實(shí)現(xiàn)

var isShow = false; ? //定義開(kāi)關(guān)變量
//loadcurr為數(shù)組，具體內(nèi)容省略了
loadcurr.forEach(item => {
? ? Stock.findOneAndUpdate({ ? ? ? ? ? ? //Stock是用來(lái)連接數(shù)據(jù)庫(kù)集合的
? ? ? ?_id: ObjectId(item._id)
? ? ? ? }, {
? ? ? ? ? ? $set: {
? ? ? ? ? ? //此處省略要修改的內(nèi)容
? ? ? ? ? ? ? ? 。。。。。。
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? function (err, data) {
? ? ? ? ? ? if (err) {
? ? ? ? ? ? ? ? console.log(err)
? ? ? ? ? ? } else {
? ? ? ? ? ? //此處應(yīng)該寫(xiě)res.json，但是為了解決報(bào)錯(cuò)讓前面定義的變量為true
? ? ? ? ? ? ? ? isShow = true
? ? ? ? ? ? ? ? console.log('1', isShow);
? ? ? ? ? ? }
? ? ? ? })
})
console.log('2', isShow);
if (isShow == true) {
? ? res.json({
? ? ? ? status: "200"
? ? })
}

這樣就可以成功解決Cannot set headers after they are sent to the client的錯(cuò)啦！?。?/p>

注意：

如果上面的代碼執(zhí)行順序是先打印了console.log('2', isShow);后打印console.log('1', isShow);，說(shuō)明存在異步，因此用異步解決即可，具體實(shí)現(xiàn)如下所示（若順序是先執(zhí)行console.log('1', isShow);后執(zhí)行console.log('2', isShow);就是正確的）：

若返回值不是promise用以下方法

var isShow = false;
? ? (async function(){
? ? ? ? await new Promise((resolve, reject) => {
? ? ? ? ? ? //loadcurr為數(shù)組，具體內(nèi)容省略了
? ? ? ? ? ? loadcurr.forEach(item => {
? ? ? ? ? ? ? ? //Stock是用來(lái)連接數(shù)據(jù)庫(kù)集合的
? ? ? ? ? ? ? ? Stock.findOneAndUpdate({
? ? ? ? ? ? ? ? ? ? _id: ObjectId(item._id)
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? $set: {
? ? ? ? ? ? ? ? ? ? ? ? //此處省略要修改的內(nèi)容
? ? ? ? ? ? ? ? ? ? ? ? 。。。。。。
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? function (err, data) {
? ? ? ? ? ? ? ? ? ? if (err) {
? ? ? ? ? ? ? ? ? ? ? ? console.log(err)
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? resolve(isShow = true)
? ? ? ? ? ? ? ? ? ? ? ? console.log('1', isShow);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
? ? ? ? })
? ? ? ? console.log('2', isShow);
? ? ? ? ? ? if (isShow == true) {
? ? ? ? ? ? ? ? res.json({
? ? ? ? ? ? ? ? ? ? status: "200"
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? })()

若返回值是promise用以下方法

var isShow = false;
? ? (async function(){
? ? ? ? //loadcurr為數(shù)組，具體內(nèi)容省略了
? ? ? ? await loadcurr.forEach(item => {
? ? ? ? ? ? //Stock是用來(lái)連接數(shù)據(jù)庫(kù)集合的
? ? ? ? ? ? _id: ObjectId(item._id)
? ? ? ? }, {
? ? ? ? ? ? ? $set: {
? ? ? ? ? ? ? //此處省略要修改的內(nèi)容
? ? ? ? ? ? ? 。。。。。。
? ? ? ? ? ?}
? ? ? ? ?},
? ? ? ? ? ? function (err, data) {
? ? ? ? ? ? ? ? if (err) {
? ? ? ? ? ? ? ? ? ? console.log(err)
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? isShow = true
? ? ? ? ? ? ? ? ? ? console.log('1', isShow);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? })
? ? ? ? console.log('2', isShow);
? ? ? ? ? ? if (isShow == true) {
? ? ? ? ? ? ? ? res.json({
? ? ? ? ? ? ? ? ? ? status: "200"
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? })()

以上就是解決循環(huán)里面寫(xiě)res.json報(bào)錯(cuò)問(wèn)題及解決異步問(wèn)題！

您可能感興趣的文章: