一、你需要准備的知識儲備
- 運用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,然后再頁面中引用。
proxyMiddleware(['/api/message/alllist/*'], {
target: 'http://***.com',
changeOrigin: true
})
];```將服務器代理到這個地址，並將匹配路由/api/message/alllist/*
啟動服務器，可以用node的本身的命令 node app.js 或者可以用expess框架中的命令 npm start (package.json中)；這時候的終端顯示為
最后在瀏覽器中輸入地址 ：localhost:3100，注意這里面的地址是你自己啟動的服務器的地址以及端口；我的端口號是3100。
訪問過后查看終端變化，顯示請求成功
