反向代理解决跨域问题

项目中后端给的数据 图片可能是一个链接网址，这时候就不可避免的需要跨域

直接操作：

1.需要在项目中新增一个app.js

反向代理的配置文件

 2.文件内需要需要引入express cros axios

const express = require('express');
const cors = require('cors');
const axios = require('axios');

const app = express();

// 配置CORS中间件
const corsOptions = {
  origin: 'http://localhost:8080',
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  allowedHeaders: 'Content-Type,Authorization',
};

app.use(cors(corsOptions));

// 定义一个简单的路由
app.get('/api/data', (req, res) => {
  const data = { message: 'This is some data from the server.' };
  res.json(data);
});

// 新增的代理路由，接受图片名称参数
app.get('/api/proxy-image/:imageName', async (req, res) => {
  try {
    const imageNames = {
      image1: 'https://z1.ax1x.com/2023/08/23/pPYdk5t.png',//第一个图片URL
    };

    const imageName = req.params.imageName;

    if (!imageNames[imageName]) {
      res.status(404).send('Image not found.');
      return;
    }

    const imageUrl = imageNames[imageName];
    const response = await axios.get(imageUrl, { responseType: 'arraybuffer' });
    const buffer = Buffer.from(response.data, 'binary');
    
    // 获取图片类型，可以根据实际情况修改 Content-Type
    const imageType = imageUrl.endsWith('.png') ? 'image/png' : 'image/jpeg';

    res.set('Content-Type', imageType);
    res.set('Access-Control-Allow-Origin', '*');
    res.send(buffer);
  } catch (error) {
    res.status(500).send('Failed to retrieve the image.');
  }
});

// 启动Express服务器
const port = process.env.PORT || 9212（设置一个端口号 这个端口号不能被占用！！;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

 3.配置之后启动服务 启动成功后会在终端返回你的端口号

node app.js  //你的文件名字

4.项目中使用

const imageUrl = 'http://localhost:9212/api/proxy-image/image1';

9212是我在app.js(配置文件）中设置的端口号

/api/proxy-image/ 是配置文件中app.get新增的路由

image1就是新增路由中的图片，有1就有2说明可以配置多个图片进行跨域