1.請求header設定

由於瀏覽器的同源策略，造成了許多的跨域操作無法完成。所以需要在服務端新增允許跨域和許多請求頭的限制。如下

在埠8088和8888分別啟動了一個服務，用8088啟動的服務去請求8888的介面。報錯如下：

這是瀏覽器發現埠號不對，攔截了請求。其實請求是已經成功了的。使用express框架中中介軟體的方式為每個請求設定允許跨域如下：

app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");          //允許所有跨域請求
    next();
})

請求可以正常傳送接收了，然後在請求頭中新增“xcors”，報錯如下：

這是請求的預檢測未通過，請求頭中不允許攜帶未宣告的變數。  設定允許新增xcors

app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-control-Allow-Headers", "xCors");    //允許請求頭中攜帶 xCors
    next();
})

請求頭如下：

請求預設允許的方法只有GET, POST,HEAD。其他方法是不允許的

傳送PUT請求，報錯如下

設定允許宣告的方法訪問。

app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-control-Allow-Headers", "xCors");
    res.header("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS,HEAD,FETCH");
    next();
})
 

請求可以正常訪問了。請求中除GET,POST,Head都需要傳送預請求，通過設定一個最大允許時間，可以減少預請求的傳送。

重新整理頁面，請求傳送6個

設定Access-Control-Max-Age超時時間

app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
res.header("Access-control-Allow-Headers", "xCors");res.header("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS,HEAD,FETCH"
 
);
res.header("Access-control-max-age", 1000);       //測試通過
next();
})

重新整理頁面，請求變為4個，預請求都可以省了

1.          app.js
var http = require('http');
var path = require('path');
var filter = require('./app_filter');    //url解析
var express = require('./node_modules/express');
var session = require('express-session');   //後臺儲存使用者資訊
var bodyParser = require('./node_modules/body-parser');     //後臺獲取傳入的資訊
var cookieParser = require('./node_modules/cookie-parser');   //瀏覽器儲存資訊
var app = express();

// HTML模板改為EJS，模板字尾名為html
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);  //設定頁面引擎為html
app.set('view engine', 'html');      




app.use(bodyParser.json());    //如果沒有，req中將沒有body物件
app.use(bodyParser.urlencoded({extended: false}));


app.use(cookieParser("xx"));
app.use(express.static(path.join(__dirname, 'public')));   //靜態資源


var store = new session.MemoryStore();      //設定session
app.use(session({
    store: store,
    name: 'gcsoft.sid',
    secret: "webmeeting",
    resave: false,
    cookie: {maxAge: 60000 * 60 * 5},
    saveUninitialized: true
}));


app.use(filter.init);            //url過濾


var routes = require('./web_routes');   //url解析。路由
app.use('/', routes);
module.exports = app;   //模組匯出


2.   www.js啟動檔案
var app = require('../app');
var http = require('http');


var server = http.createServer(app);   //建立伺服器
app.set('port', 8080);
server.listen(8080)  //監聽8080埠


3.  過濾器app_filter
exports.init = function(req, res, next) {
    var ignore_url =['/sign','/checkUser'];    //忽略的介面陣列
    for (var i = 0; i < ignore_url.length; i++) {
        if (req.url.indexOf(ignore_url[i])  != -1) {
            return next();  //如果忽略，進入web_router路由
        }
    }
    if (!req.session.user) {    //未登入
        if (req.xhr) {
            //如果是ajax請求，則返回JSON
            return res.send({
                result_code: -1,
                message: "未登入"
            });
        } else {
            //如果不是ajax請求，則返回登入頁面
            return res.redirect('http://' + req.headers.host + '/sign');
        }
        next();
    }
    return next();    //已登入，正常執行
}
4. 模組引入
./代表當前目錄下。

../代表上一級目錄。

5.後臺
session的儲存與銷燬
req.session.user = data.userInfo;
req.session.destroy();
返回頁面求請求 ：res.render('Index')即會載入Index.html
返回操作的狀態資訊：res.status(200).json({});
返回資料：res.send(data);目錄結構