使用NodeJs反向代理http请求并解决跨域问题

前言

准备使用Halo搭建个人博客，但是在初始化时因为我乱摁键盘卡出了一个bug，原本是8090端口服务端，其他请求没问题，但css等静态资源神奇地变成了809端口.... 如图

(请求的是8090，但css等静态资源很迷的变成了809，导致页面没样式)

怎么办呢？全部重新删掉再安装？..... 突然意识到手头有NodeJs，行吧，干脆就用Node代理下请求，把809请求转到8090就好了

使用NodeJs反向代理http请求

1. 在你的nodejs项目路径下初始化

npm init

然后一路回车就可以了，只不过这样的话启动文件必须是app.js，想改的话不要一路回车，因为中途会有个输入文件名的提示

2. 使用npm包管理器安装express和http中间件代理模块

npm install express http-proxy-middleware --save-dev

3. 新建app.js，输入如下代码

var express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();
app.set('port', '809'); // 你NodeJs代理端口

var options = {
target: 'http://localhost:8090', // 你服务器端口
changeOrigin: true,
};
var exampleProxy = proxy(options);
app.use('/', exampleProxy); // ‘/’ 表示对所有请求代理
app.listen(app.get('port'), () => {
console.log(`server running @${app.get('port')}`);
});

弄完后结构大致是这样的

4. 启动NodeJs

node app.js

再次请求8090端口，这次果然好了....... 不对，好像还有什么问题

报错 No 'Access-Control-Allow-Origin' header ，原来是809、8090请求跨了端口，属于跨域问题

NodeJs解决跨域请求

将上面的代码添加跨域处理部分，代码如下

var express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();
app.set('port', '809');

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");
if (req.method == "OPTIONS") {
res.send(200);
} else {
next();
}
});

var options = {
target: 'http://localhost:8090',
changeOrigin: true,
};
var exampleProxy = proxy(options);
app.use('/', exampleProxy);
app.listen(app.get('port'), () => {
console.log(`server running @${app.get('port')}`);
});