使用fetch調用node.js的Resuful服務

在目前的軟件架構中，慢慢又有這樣的趨勢，就是在前端和業務接口層中間再加入一層，這是因爲nodejs相對JAVA而言不適合作複雜的業務邏輯，以下圖：

在這樣的結構中，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;