浏览器跨域问题
我用node做了一个BFF层,同域部署页面,服务对服务请求
- 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);
});
- 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;
- 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再同一域也不会跨域;跨域是浏览器的一种保护机制,他不允许不同域之间的数据交互。