单一域名下的多页面跳转与单端口 Node.js 后端处理

云端之上

发布于 2024-03-12 11:29:06

780

发布于 2024-03-12 11:29:06

文章被收录于专栏：云端之上云端之上

环境

操作系统：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

//前端页面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

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

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}`);
});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-10，如有侵权请联系 cloudcommunity@tencent.com 删除

前端