運用 node + express + http-proxy-middleware 實現前端代理跨域的 詳細實例哦
阿新 • • 發佈：2018-08-09
管理工具 and 訪問 ext pub 文件夾 破解 next() 包管理
一、你需要準備的知識儲備
- 運用node的包管理工具npm 安裝插件、中間件的基本知識；
2.express框架的一些基礎知識，知道如何建立一個小的服務器；曉得如何快速的搭建一個express框架小應用；
3.還需要一些前端的基礎小知識，html\css\js\jquery
4。最重要的一點就是知道怎麽產生的跨域，要是不知道怎麽產生的跨域，如何知道需要去破解它呢？
二、實例的代碼分析
場景分析，我本地的域名為<http.localhost:8080>，我要請求的地址是<http.****.com>
html頁面代碼（express生成的public文件夾下的index.html)-----稍後會有圖片展示目錄關系。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <form action="" method=‘GET‘> <input type="submit"> <input type="hidden" name=‘__method‘ value=‘search‘> </form> </body> <script> $.ajax({ url: ‘/api/message/alllist/new‘, type: ‘get‘, dataType: ‘json‘, success: function(res) { console.log(res) } }) </script> </html>
app.js頁面代碼(express生成的app.js）
var createError = require(‘http-errors‘); var express = require(‘express‘); var path = require(‘path‘); var cookieParser = require(‘cookie-parser‘); var logger = require(‘morgan‘); var indexRouter = require(‘./routes/index‘); var usersRouter = require(‘./routes/users‘); var app = express(); var proxyMiddleware = require(‘http-proxy-middleware‘); // view engine setup app.set(‘views‘, path.join(__dirname, ‘views‘)); app.set(‘view engine‘, ‘ejs‘); // app.use(function(req, res, next) { // console.log(req.query.__method, req.method); // req.old = req.method; // req.method = req.query.__method; // next(); // }) app.use(logger(‘dev‘)); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, ‘public‘))); app.middleware = [ proxyMiddleware([‘/api/message/alllist/*‘], { target: ‘http://***.com‘,//將要代理的地址 changeOrigin: true }) ]; app.use(app.middleware); // 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;
目錄圖片
自己大白話解釋：
首先要安裝http-proxy-middleware ，
npm install http-proxy-middleware --save-dev,然後再頁面中引用。
app.middleware = [ proxyMiddleware([‘/api/message/alllist/*‘], { target: ‘http://***.com‘, changeOrigin: true }) ];將服務器代理到這個地址，並將匹配路由/api/message/alllist/*
啟動服務器，可以用node的本身的命令 node app.js 或者可以用expess框架中的命令 npm start (package.json中)；這時候的終端顯示為
最後在瀏覽器中輸入地址 ：localhost:3100，註意這裏面的地址是你自己啟動的服務器的地址以及端口；我的端口號是3100。
訪問過後查看終端變化，顯示請求成功
至此你請求的數據就是你代理的服務器上的數據，這就是我對用node +express+http-proxy-middleware進行跨域請求得見解，如果有大神覺得有不對的地方歡迎指正，以及歡迎誌同道合的同誌一起研究技術。
運用 node + express + http-proxy-middleware 實現前端代理跨域的 詳細實例哦