一、你需要准备的知识储备
- 运用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 setupapp.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 handlerapp.use(function(req, res, next) { ???next(createError(404));});// error handlerapp.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 实现前端代理跨域的 ?详细实例哦
原文地址：https://www.cnblogs.com/oxiaojiano/p/9448628.html