我該如何防止瀏覽器重新加載POST路徑？

我正在使用節點和條紋來處理付款。我有一個/charge路由設置，它從前端獲取一堆參數並呈現收據。我該如何防止瀏覽器重新加載POST路徑？

我想知道如何將POST路由重定向到GET路由，以防止有人在加載POST路由後嘗試重新加載頁面時發生錯誤？

這些是我的路線到目前爲止。我有一個付款按鈕/，它發送POST請求到/charge。

router.get('/', function(req, res, next) { 
    res.render('index', { title: 'Express' }); 
}); 

router.post('/charge', function(req, res, next) { 

    var stripeToken = req.body.stripeToken; 
    var stripeEmail = req.body.stripeEmail; 
    var amount = 3999; 
    var description = "Product description"; 

    var charge = stripe.charges.create({ 
    amount: amount, // amount in cents, again 
    currency: "gbp", 
    source: stripeToken, 
    receipt_email: stripeEmail, 
    description: description 
    }, function(err, charge) { 
    if (err && err.type === 'StripeCardError') { 
     // The card has been declined 
    } else { 
     res.render('charge', { 
     title: 'Charge', 
     descrption: charge.description, 
     total: (charge.amount/100) + charge.currency.toUpperCase(), 
     trans_id: charge.id 
     }); 
    } 
    }); 

});

像我現在有它的/charge路線錯誤實在太差了，並且打破了應用程序如果頁面提交後重新加載。這是由於該令牌僅在第一次嘗試時纔有效，所以在此之後的所有嘗試中，對象都是空的。

解決此問題的最佳方法是什麼？重定向到新頁面？我如何獲得charge值以堅持到這個新頁面？我可以重定向到刷新網頁嗎？

任何意見，將不勝感激！

來源

2016-01-08 Scotty

你有沒有考慮通過AJAX發送POST？ – csum

它可以幫助您隔離您的GET/POST請求，以便您不會隨身攜帶POST數據（導致您遇到的問題）。在這裏，您可以驗證並處理數據，然後將結果作爲查詢字符串傳遞給GET路由。

var querystring = require('querystring'); 

router.post('/charge', function(req, res) { 
    var stripeToken = req.body.stripeToken; 
    var stripeEmail = req.body.stripeEmail; 
    var amount = 3999; 
    var description = "Product description"; 
    if (!stripeToken || !stripeEmail) { 
     //do something with error 
     res.redirect('/charge-error'); 
     //or 
     res.sendStatus(404); 
     return; 
    } 
    var charge = stripe.charges.create({ 
     amount: amount, // amount in cents, again 
     currency: "gbp", 
     source: stripeToken, 
     receipt_email: stripeEmail, 
     description: description 
    }, function(err, charge) { 
     if (err && err.type === 'StripeCardError') { 
      // The card has been declined 
      res.redirect('/charge-error'); 
     } else { 
      //redirect with result 
      res.redirect('/charge?' + querystring.stringify({ 
       title: 'Charge', 
       descrption: charge.description, 
       total: (charge.amount/100) + charge.currency.toUpperCase(), 
       trans_id: charge.id     
      }); 
     } 
    }); 
}); 


router.get('/charge', function(req, res) { 
    //do GET stuff 
    res.render('charge', { 
     title: req.query.title, 
     descrption: req.query.description, 
     total: req.query.total, 
     trans_id: req.query.trans_id 
    }); 
});

參見：res.redirect(<location>); @http://expressjs.com/en/api.html#res.redirect

來源

2016-01-08 19:47:18 Sparkida

另一種常見的方式來保存數據（包括錯誤/成功消息）通過一次重定向就是使用在下一次成功請求後立即過期的cookie。通常稱爲flash cookie：http://stackoverflow.com/a/23161019/511200，但我不能擔保任何特定的Express實現。 – danneu

非常好。這就是我的目標！就像@danneu所說的，是否有辦法創建會在重定向完成後立即失效的會話/ cookie？保存傳遞參數作爲URL中的查詢字符串？ – Scotty

@Scotty：我不使用Express，但只是作爲一個例子，這裏是我將Koa解決方案移植到Express中間件的不完整嘗試：https：//gist.github.com/danneu/daa2105b1316276974d0 - 它不起作用我不確定如何編寫在處理完請求後（但在發送響應之前）運行的Express中間件，以便我可以在成功響應中清除Flash cookie，但也許它可以幫助說明通常如何實現閃存會話。 – danneu

我會重新引導他們到成功/失敗頁面。 POST請求。另一種選擇是使用API端點來處理POST，這會讓您更好地控制用戶正在與之交互的頁面，而不是老式的POST。

來源

2016-01-08 19:00:00 errata

這不是OP所要求的。另外： - Node中不存在$ window.location，OP使用的是什麼 - OP使用API端點處理POST，其位置是'/ charge' – Sparkida

我該如何防止瀏覽器重新加載POST路徑？

回答

相關問題