浏览器跨域问题

浏览器跨域问题

我用node做了一个BFF层，同域部署页面，服务对服务请求

1. app.js

const express = require("express");
const cors = require("cors");
const bodyParser = require('body-parser');
const app = express();
const path = require("path");
const proxyRouter = require("./routes/proxy");
app.use(cors());
app.use(express.static(path.join(__dirname, "dist"))); // 静态文件index.html
app.use(express.static("accets"));
app.use(express.urlencoded({ extended: false }));   // 解析get请求
app.use(express.json()); // 解析post请求
app.use("/", proxyRouter);
// 启动代理服务器并监听指定端口
const port = 3210;
app.listen(port, () => {
  console.log("代理服务器已启动，监听端口 " + port);
});

2. proxy.js

var express = require("express");
var router = express.Router();
const axios = require("axios");
const { APPURL, getApiUrl, postApiUrl } = require("./config");
/**
 * node代理转发
 */
getApiUrl.forEach((item) => {
  router.get(item, async function (req, res, next) {
    try {
      // 动态url，替换一下
      if (req.params.id) {
        const id = req.params.id;
        const newUrl = item.replace(/(:[^\/]+)/, id);
        const apiResponse = await axios.get(APPURL + newUrl);
        // 返回 API 响应给前端
        res.json(apiResponse.data);
      } else {
        // 静态直接转发
        // 发起实际的 API 请求
        const apiResponse = await axios.get(APPURL + item);
        // 返回 API 响应给前端
        res.json(apiResponse.data);
      }
    } catch (error) {
      // 处理错误
      console.error("GET Error fetching data from API:", error.message);
      res.status(500).json({ error: "Internal Server Error" });
    }
  });
});
postApiUrl.forEach((item) => {
  router.post(item, async function (req, res, next) {
    try {
      //发起实际的API请求
      const apiResponse = await axios.post(APPURL + item, req.body);
      //返回API响应给前端
      res.json(apiResponse.data);
    } catch (error) {
      //处理错误
      console.error("POST Error fetching data from API:", error.message);
      res.status(500).json({ error: "Internal Server Error" });
    }
  });
});
module.exports = router;

3. config.js

const APPURL = "http://192.168.31.45:8222"; // 远程服务器URL
const getApiUrl = [
  "/api/agv/getStorage" // api接口
];
const postApiUrl = ["/api/rcs/sendWork"];
module.exports = {
  APPURL,
  getApiUrl,
  postApiUrl,
};

原理就是网页向node发送请求，node进行转发到服务器，服务器接到请求之后返回数据给node层，之后node再返回给前端网页，因为服务对服务请求是不存在跨域，然后网页和node再同一域也不会跨域；跨域是浏览器的一种保护机制，他不允许不同域之间的数据交互。