环境
操作系统:CentOS 8.0
HTTP 和反向代理 Web 服务器:Nginx
后端:Node.js
问题
后端只能监听一个端口,且该端口拒绝外网访问,同时后端不能监听多个端口。如果用户需访问多个不同页面,每个页面都需触发不同的后端事件,在只有一个域名且Node.js只监听一个端口的情况下,Node.js单端口监听如何实现单域名多页面处理不同的后端事件呢?
解决思路
1.Nginx解决单域名多页面本地访问后端问题。即将单域名切分为同域名不同路径,Nginx通过对不同的域名路径进行识别,分别对不同的域名转发跳转至本地后端端口。
2.Node.js解决单端口处理多个不同后端事件的问题。即通过合理配置Node.js,使Node.js通过对本地127.0.0.1的不同路径进行识别,分别对不同的路径执行对应各自的后端事件处理。
具体实现
前端JS
代码语言:javascript复制//前端页面a
async function a() {
const response = await fetch('http://hallow.cn/a/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
//body: jsonData,
});
if (response.ok) {
}
} catch (error) {
}
}
//前端页面b
async function b() {
const response = await fetch('http://hallow.cn/b/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
//body: jsonData,
});
if (response.ok) {
}
} catch (error) {
}
}
//前端页面c
async function c() {
const response = await fetch('http://hallow.cn/c/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
//body: jsonData,
});
if (response.ok) {
}
} catch (error) {
}
}
Nginx
代码语言:javascript复制server {
listen 80;
listen [::]:80;
server_name hallow.cn;
location /a/ {
#http://127.0.0.1:8000/api/a为Node.js监听的路径
proxy_pass http://127.0.0.1:8000/api/a;
proxy_redirect off;
}
location /b/ {
#http://127.0.0.1:8000/api/b为Node.js监听的路径
proxy_pass http://127.0.0.1:8000/api/b;
proxy_redirect off;
}
location /b/ {
#http://127.0.0.1:8000/api/b为Node.js监听的路径
proxy_pass http://127.0.0.1:8000/api/b;
proxy_redirect off;
}
}
Node.js
代码语言:javascript复制const express = require('express');
const bodyParser = require('body-parser');
// 创建Express应用实例
const app = express();
// 设置允许跨域访问的中间件(要处理post请求必须要有该代码)
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.setHeader('Access-Control-Allow-Credentials', true);
// 对于预检OPTIONS请求,直接返回200(前端访问后端时都会先发一个预检请求,预检返回200时才会真正访问后端
if (req.method === 'OPTIONS') {
return res.sendStatus(200);
}
next();
});
// 使用body-parser解析JSON请求体
app.use(bodyParser.json());
//如果是项目a前端post,走这里处理
// 设置一个处理POST请求的路由,前端访问后端http填写则需要“ip/api/a”的形式才会到这里处理
app.post('/api/a', (req, res) => {
//执行具体的事件处理代码
});
//如果是项目b前端post,走这里处理
// 设置一个处理POST请求的路由,前端访问后端http填写则需要“ip/api/b”的形式才会到这里处理
app.post('/api/b', (req, res) => {
//执行具体的事件处理代码
});
//如果是项目c前端post,走这里处理
// 设置一个处理POST请求的路由,前端访问后端http填写则需要“ip/api/c”的形式才会到这里处理
app.post('/api/c', (req, res) => {
//执行具体的事件处理代码
});
//持续监听8000端口
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});