H5項目 基於vue+axios(mock)+nodejs+webpack多入口和多出口項目

最近接手了一個h5項目,真好又不用和jq打交道了(滑稽臉)
基於先後端分離,而且用nodejs做爲後臺服務,請求java服務器完成跨域請求接口。可是這種方案最終被pass掉了,由於公司是基於nginx。雖然用不了node可是本地起服務來測試仍是很爽的。html

貼一下server.js的內容
1,server利用express框架,啓動node服務java

2,而且利用app.all配置跨域(實現的效果其實沒生效,最終實現的是proxy模塊)node

3,利用app.use實現靜態資源打包,而且配置跨域的target(這個地方相似於開發的proxytable的配置選項)nginx

4,app.get實現了多個出口的配置 express

5,最後監聽3000端口,訪問頁面
後端

var express = require('express');
var app = express();
var proxy = require('http-proxy-middleware');
app.all('*', function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Credentials", "true");
   res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
   res.header("Access-Control-Allow-Headers", "X-Requested-With");
   res.header('Access-Control-Allow-Headers', 'Content-Type');
   next();
});
// 打包靜態資源
app.use('/static',express.static(__dirname + '/demo/dist/static'));
// 實現node服務請求java服務
app.use(
   '/apis',
   proxy({
       target: 'http://' // 你的請求地址
       , changeOrigin: true 
       ,pathRewrite: {
         '^/apis': ''   //須要rewrite重寫的,
      } 
   })
 );
//  多出口
app.get('/operateCard.html', function(req, res){
   res.sendFile(__dirname+'/demo/dist/operateCard.html');
});
app.get('/operatePwd.html', function(req, res){
   res.sendFile(__dirname+'/demo/dist/operatePwd.html');
});
app.get('/operateMoney.html', function(req, res){
   res.sendFile(__dirname+'/demo/dist/operateMoney.html');
});

var server = app.listen(3000,"0.0.0.0" ,function(){
   var host = server.address().address;
   var port = server.address().port;
   console.log('App listening at http://%s:%s', host, port);
});
相關文章
相關標籤/搜索