使用fetch呼叫node.js的Resuful服務
阿新 • • 發佈:2018-11-28
在目前的軟體架構中,慢慢又有這樣的趨勢,就是在前端和業務介面層中間再加入一層,如下圖:
在這樣的結構中,JS前端和web層都是前端開發工程師來完成,可以大大提升開發效率。JS前端和web層還是可以通過Restful介面來進行通訊。即JS前端通 fetch 呼叫 web層由node.js提供的服務。下面是一個具體的例子,在實際除錯時卡了半天,所以特此一記。
前端:
const url = "http://127.0.0.1:3001/createAccount"; fetch(url, { method: "POST", mode:"cors", body:"pwd=sdd", headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(response => response.json()) .then(result => { // 在此處寫獲取資料之後的處理邏輯 console.log(result); }).catch(function (e) { //console.log("fetch fail", JSON.stringify(params)); alert(e); });
上面標紅的兩處非常重要,在百度有些文章的寫法如下:
let formData = new FormData();
formData.append("pwd","hello");
fetch(url, {
method: "POST",
mode: "cors",
body:formData,
.....
.......
但是發現在web端無法獲法提交的引數
web端
res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); console.log(req.body.pwd) ; //獲到提交的引數 res.send({ /* success: true, code:0,*/ "msg":"success" });
由於web端使用了express框架,下面是express的相關配置:
var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var webRouter = require('./web_router'); var app = express(); app.use(logger('dev')); //const bodyParser = require('body-parser'); //app.use(bodyParser.json());//資料JSON型別 //app.use(bodyParser.urlencoded({ extended: false }));//解析post請求資料 app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'pug'); app.use('/', webRouter); // catch 404 and forward to error handler app.use(function(req, res, next) { next(createError(404)); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {}; // render the error page res.status(err.status || 500); res.render('error'); }); module.exports = app;