運用 node + express + http-proxy-middleware 實現前端代理跨域的詳細實例哦

時間 2020-07-16

標籤運用 node express http proxy middleware 實現前端代理詳細實例欄目 HTTP/TCP 简体版

原文原文鏈接

1、你須要準備的知識儲備

運用node的包管理工具npm 安裝插件、中間件的基本知識；
2.express框架的一些基礎知識，知道如何創建一個小的服務器；曉得如何快速的搭建一個express框架小應用；
3.還須要一些前端的基礎小知識，html\css\js\jquery
4。最重要的一點就是知道怎麼產生的跨域，要是不知道怎麼產生的跨域，如何知道須要去破解它呢？

2、實例的代碼分析

場景分析，我本地的域名爲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,而後再頁面中引用。css

proxyMiddleware(['/api/message/alllist/*'], {
    target: 'http://***.com',
    changeOrigin: true
})

];```將服務器代理到這個地址，並將匹配路由/api/message/alllist/*html

啓動服務器，能夠用node的自己的命令 node app.js 或者能夠用expess框架中的命令 npm start (package.json中)；這時候的終端顯示爲
前端

最後在瀏覽器中輸入地址：localhost:3100，注意這裏面的地址是你本身啓動的服務器的地址以及端口；個人端口號是3100。node

訪問事後查看終端變化，顯示請求成功
jquery

至此你請求的數據就是你代理的服務器上的數據，這就是我對用node +express+http-proxy-middleware進行跨域請求得看法，若是有大神以爲有不對的地方歡迎指正，以及歡迎志同道合的同志一塊兒研究技術。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

運用 node + express + http-proxy-middleware 實現前端代理跨域的 詳細實例哦

1、你須要準備的知識儲備

2、實例的代碼分析

場景分析，我本地的域名爲http.localhost:8080，我要請求的地址是<http.****.com>

html頁面代碼（express生成的public文件夾下的index.html)-----稍後會有圖片展現目錄關係。

app.js頁面代碼(express生成的app.js）

目錄圖片

本身大白話解釋：

至此你請求的數據就是你代理的服務器上的數據，這就是我對用node +express+http-proxy-middleware進行跨域請求得看法，若是有大神以爲有不對的地方歡迎指正，以及歡迎志同道合的同志一塊兒研究技術。

運用 node + express + http-proxy-middleware 實現前端代理跨域的詳細實例哦