$ npm install --save-dev http-proxy-middleware
npm install express// 引用依賴 var express = require('express'); var proxy = require('http-proxy-middleware'); // proxy 中間件的選擇項 var options = { target: 'http://www.example.org', // 目標服務器 host changeOrigin: true, // 默認false，是否需要改變原始主機頭為目標URL ws: true, // 是否代理websockets pathRewrite: { '^/api/old-path' : '/api/new-path', // 重寫請求，比如我們源訪問的是api/old-path，那么請求會被解析為/api/new-path '^/api/remove/path' : '/path' // 同上 }, router: { // 如果請求主機 == 'dev.localhost:3000', // 重寫目標服務器 'http://www.example.org' 為 'http://localhost:8000' 'dev.localhost:3000' : 'http://localhost:8000' } }; // 創建代理 var exampleProxy = proxy(options); // 使用代理 var app = express(); app.use('/api', exampleProxy); app.listen(3000);
https://www.cnblogs.com/resultwp/p/9945606.htm vue 非常規跨域實現 proxyTable 設置及依賴
1、config/index.js 設置跨域的地址 proxyTable: { '/api': { //跨域標識 請求地址為‘http://1xxx.xxx.com/index/list’, 請求時 “/api/index/list” target: 'http://1xxx.xxx.com', changeOrigin: true, //允許跨域 pathRewrite: { //重新跨域標識 '^/api': '' } } }, 2、build/webpack.dev.conf.js 引入express、http-proxy-middleware，如下： const proxyMiddleware = require('http-proxy-middleware') var express = require('express') var app = express() // proxy api requests const proxyTable=config.dev.proxyTable; Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === 'string') { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options)) })
a、引入express
const express = require('express') const app = express() const proxyMiddlewar = require('http-proxy-middlewar')代理配置
ok，這兩個就是進行反向代理的准備工作。下面開始進行反向代理配置。 首先，需要知道的是后端服務器的ip和端口號， const proxyPath = 'http://168.96.0.1:8080' // 注意，這里只需要IP和端口號就可以了。這個ip我瞎寫的 const proxyOption = {target: proxyPath,changeOrigin: true} 現在用express使用這個代理就好了
app.use('/api', proxyMiddlewar(proxyOption)) // 下面詳細說明這一段 app.listen() //表示監聽的端口號也就是本地的端口號。用vue-cli構建的項目不需要寫這行代碼
express指定返回的攔截器處理:
const express = require("express"); const http = require("http"); const app = express(); ////////////////////// 添加Log4js配置 ///////////////////////////// log.use(app); ////////////////////// 獲取post過來的數據 ///////////////////////////// var bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: false })); ////////////////////// 設置web工程的根目錄 ///////////////////////////// app.use(express.static(__dirname + '/')); ////////////////////// 允許跨域 ///////////////////////////// app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') if(req.method=="OPTIONS") res.send(200);/*讓options請求快速返回*/ else next(); }); ////////////////////// 利用文件來拆分路由的規模 ///////////////////////////// var apiRouterIndex = require('./routes/api/apiRouterIndex'); app.use('/api', apiRouterIndex); ////////////////////// 404處理 ///////////////////////////// app.get('*', function (req, res){ console.log('404 handler..') res.render('common_page/404.html', { status: 404, title: 'NodeBlog', }); }); const server = http.createServer(app).listen(3000,'localhost',function () { const host = server.address().address; const port = server.address().port; // console.log("應用實例，訪問地址為 http://%s:%s", host, port); process.env.host = host; // process 不能存儲JSON格式的數據 process.env.port = port; global.userInfo = { name: 'huangbiao', age: 30 } app.SERVER_INFO = { name: 'zhangsan', age: 30 } });
需要使用app.use('/api', apiRouterIndex);這種方式配置URL請求的范圍
const express = require('express'); const router = express.Router(); const tokenConfig = require('../common/config/tokenConfig'); // 處理token 的同一工具 const jwtUtils = require('../common/util/jwtUtils'); const apiService = require('./service/apiService.js'); var jwt= require('jsonwebtoken'); // 使用jwt簽名 var fs = require('fs'); // 用來驗證token，作為后台管理的攔截器 router.use(function (req, response, next) { var isToken = jwtUtils.checkTokenByRequest(req); // 如果獲取的token 不合格，則給出提示信息 if (!isToken) { response.status(200).json({ state: 0, message: 'token數據不正確' }); return false; } next(); }); // 查詢所有的標簽 接口 router.get('/tags/list', function(req, res, next) { // 創建tag標簽 apiService.queryTagList({},function (err, results, fields) { res.json({ data: results }); }); }); // 刪除標簽 接口 router.post('/tags/delete', function(req, res, next) { console.log(req.body); var id = req.body.id; // 刪除tag標簽 apiService.deleteTagById(id, function (err, result) { res.json({ status: true }); }); }); module.exports = router;
在所有URL前面添加一個router.use(function (req, response, next) {next();});方法，用來驗證token是否正確，這個攔截器只是針對http://localhost:3000/api打頭的請求
// 引入模塊依賴 const fs = require('fs'); const path = require('path'); const jwt = require('jsonwebtoken'); // 創建 token 類 class Jwt { constructor(data) { this.data = data; } // 檢查token static checkTokenByRequest (requestObj) { // 拿取token 數據 按照自己傳遞方式寫 var tokenOrigin = requestObj.headers['Authorization'] || requestObj.headers['authorization']; if (tokenOrigin === '' || tokenOrigin === undefined || tokenOrigin === null ) { console.log('的值不能為空') return false; } // 獲取服務器返回的token值 var tokenStr = tokenOrigin.split(' ')[1]; if (tokenStr === '' || tokenStr === undefined || tokenStr === null ) { console.log('token 格式不正確') return false; } return tokenStr; } // 從header請求中獲取token static getTokenFromHeader (requestObj) { var tokenStr = this.checkTokenByRequest(requestObj); if (tokenStr) { return tokenStr; } else { return null; } } } module.exports = Jwt;
https://www.jianshu.com/p/a248b146c55a http-proxy-middleware
https://blog.csdn.net/xmloveth/article/details/56847456 npm模塊之http-proxy-middleware使用教程（譯
https://www.jianshu.com/p/47c9e65f5a04 Vue項目中使用express實現反向代理
https://blog.csdn.net/hbiao68/article/details/85769755 express指定返回的攔截器處理
https://www.jianshu.com/p/9401a099c032?utm_source=oschina-app node.js之express模塊