前端最普遍的就是遇到跨域,这个问题一般都会用node框架例如egg,express工具编写
下面就开始看看项目架构
最主要的文件是proxy.js
const express = require('express');
const axios = require('axios');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const FormData = require('form-data'); // 引入 form-data
const iconv = require('iconv-lite');
const fs = require('fs');
const app = express();
//前端项目端口
const port = 3010;// 设置 multer 存储引擎
const upload = multer(); // 默认使用内存存储// 配置 CORS
app.use(cors({origin: 'http://localhost:9528', // 替换为你的前端地址credentials: true, // 允许携带 Cookie})
);// 解析 JSON 请求体
app.use(express.json());// 解析 multipart/form-data 请求体
app.use(upload.any()); // 解析 multipart 数据,任何字段都可以处理// 中转路由
app.all('/proxy/*', async (req, res) => {try {// 构造目标 URL 这是你要请求的接口路径// const targetUrl = '';// 请求方法和数据const { method, body, query, headers } = req;// 判断请求是否包含文件if (req.files && req.files.length > 0) {// 处理文件上传的请求const form = new FormData();req.files.forEach(file => {const decodedName = iconv.decode(Buffer.from(file.originalname, 'binary'), 'utf-8');// 如果仍有乱码,可以直接设置默认文件名,避免后续问题file.originalname = decodedName || 'unknown_file';form.append(file.fieldname, file.buffer, {filename: file.originalname,contentType: file.mimetype,});});// 如果请求体中有其他字段,添加到 form-dataObject.keys(body).forEach(key => {form.append(key, body[key]);});// 获取 form-data 请求头const formHeaders = form.getHeaders();// 转发请求const response = await axios({url: targetUrl,method,headers: {...formHeaders, // 添加 form-data 的 headershost: new URL(targetUrl).host, // 替换 Host 为目标主机cookie: headers.cookie || '', // 转发客户端传递的 Cookie},params: query, // GET 参数data: form, // 请求体,包含表单数据timeout: 50000, // 可选:设置超时时间});// 设置目标接口的 Cookie 到响应头if (response.headers['set-cookie']) {res.setHeader('set-cookie', response.headers['set-cookie']);}// 转发响应res.status(response.status).send(response.data);} else {// 处理普通的 JSON 请求const response = await axios({url: targetUrl,method,headers: {...headers,host: new URL(targetUrl).host, // 替换 Host 为目标主机cookie: headers.cookie || '', // 转发客户端传递的 Cookie},params: query, // GET 参数data: body, // JSON 请求体timeout: 5000, // 可选:设置超时时间});// 设置目标接口的 Cookie 到响应头if (response.headers['set-cookie']) {res.setHeader('set-cookie', response.headers['set-cookie']);}// 转发响应res.status(response.status).send(response.data);}} catch (error) {console.error('Proxy error:', error.message);// 处理错误if (error.response) {res.status(error.response.status).send(error.response.data);} else {res.status(500).send({ error: 'Internal Server Error' });}}
});// 静态资源
app.use(express.static(path.join(__dirname, 'public')));// 启动服务
app.listen(port, () => {console.log(`Proxy server running at http://localhost:${port}`);
});
这样你前端项目就可以用http://localhost:3010/proxy/打开