React+Express项目上传图片至第三方图床时遇到CORS问题求助

开发者阿泽

2026-8-30

问题解决指南

核心问题原因

你遇到的跨域问题本质是：CORS是浏览器独有的同源安全限制，服务端之间发起HTTP请求完全不受CORS规则约束。
你在Express中配置的cors中间件，仅用于处理外部请求访问你自己后端接口时的跨域校验，无法干预浏览器从前端页面直接请求第三方图床接口的行为。第三方图床（freeimage.host、imgur等）的公开上传接口默认不会返回允许任意前端域名跨域访问的响应头，浏览器会直接拦截响应，这就是你前端直传报错的根源。

结论：这类场景必须走后端代理实现上传：前端只把文件传给你自己的Express服务，由后端服务转发请求给图床API，拿到图片URL后再返回给前端，全程浏览器只和同源的自有后端通信，完全不会触发CORS校验。这种方式还能避免图床API Key泄露到前端代码，安全性更高。

先解决node-fetch导入报错问题

你遇到的导入失败是因为node-fetch v3及以上版本仅支持ES Module规范，和你当前Express项目使用的CommonJS规范不兼容，三选一即可解决：

最简单方案：安装v2版本的node-fetch，执行命令npm install node-fetch@2，之后直接用const fetch = require('node-fetch')即可正常调用
不降级版本方案：修正动态导入的写法，import()是异步返回模块对象的，需要取default属性才是fetch方法：
```
exports.upload = async (req, res) => {
  const fetch = (await import('node-fetch')).default;
  // 后续写fetch请求逻辑
}
```
零依赖方案：将本地Node.js版本升级到18及以上，Node 18+已原生内置fetch API，无需安装任何第三方包即可直接调用。

完整代理上传实现步骤

第一步：后端配置

图床上传接口需要接收multipart/form-data格式的请求，不能传JSON格式数据，需要用multer中间件处理前端传过来的文件：

安装必要依赖：npm install multer node-fetch@2 form-data

编写上传控制器（注意用内存存储文件，不需要把文件落到本地磁盘，转发效率更高）：

const fetch = require('node-fetch');
const FormData = require('form-data');
const multer = require('multer');
// 配置multer内存存储
const uploadMid = multer({ storage: multer.memoryStorage() });

exports.uploadToImgHost = [
  // 单文件上传中间件，对应前端传的文件字段名为image
  uploadMid.single('image'),
  async (req, res) => {
    try {
      if (!req.file) {
        return res.status(400).json({ error: '未接收到上传文件' });
      }
      // 组装发给图床的表单数据
      const imgForm = new FormData();
      // 替换为你自己的图床API Key
      imgForm.append('key', '6d207e02198a847aa98d0a2a901485a5');
      imgForm.append('source', req.file.buffer, {
        filename: req.file.originalname,
        contentType: req.file.mimetype
      });
      // 其他可选参数参考对应图床的API文档追加即可

      // 转发请求到图床
      const imgRes = await fetch('https://freeimage.host/api/1/upload', {
        method: 'POST',
        body: imgForm
      });
      const imgResult = await imgRes.json();

      if (imgResult.status_code !== 200) {
        return res.status(400).json({ error: imgResult.status_txt || '图床上传失败' });
      }
      // 将图床返回的图片URL返回给前端
      return res.status(200).json({
        imgUrl: imgResult.image.url
      });
    } catch (error) {
      console.error('上传异常：', error);
      return res.status(500).json({ error: '服务端上传异常' });
    }
  }
]

配置路由，比如在你已有的RouteTest路由文件中添加：

const express = require('express');
const router = express.Router();
const imgController = require('../controllers/你的控制器文件名');
// 上传接口
router.post('/upload-img', imgController.uploadToImgHost);

// 你原有的其他路由保持不变
module.exports = router;

配置完成后，上传接口的本地访问地址为http://localhost:8081/api/test/upload-img。

第二步：前端React组件修改

前端不再直接请求第三方图床，改为请求自有后端接口即可，同域请求不会触发CORS：

import React, { useState } from 'react'
import { Form } from 'react-bootstrap'

export default function TestUpload() {
  const [file, setFile] = useState(undefined);
  const [imgUrl, setImgUrl] = useState('');

  const handleFileChange = e => {
    setFile(e.target.files[0]);
  }

  const handleUpload = async () => {
    if (!file) {
      alert('请先选择要上传的图片');
      return;
    }
    const formData = new FormData();
    // 字段名和后端multer配置保持一致，为image
    formData.append('image', file);

    try {
      const res = await fetch('/api/test/upload-img', {
        method: 'POST',
        body: formData
      });
      const result = await res.json();
      if (res.ok) {
        setImgUrl(result.imgUrl);
        console.log('上传成功，图片地址：', result.imgUrl);
      } else {
        console.error('上传失败：', result.error);
      }
    } catch (err) {
      console.error('请求异常：', err);
    }
  }

  return (
    <div>
      <button onClick={handleUpload}>Upload</button>
      {imgUrl && <img src={imgUrl} alt="上传预览" style={{maxWidth: 500}} />}
      <Form>
        <Form.Group controlId="fileName">
          <Form.Label className='VerticalLabel'>Photo ou image :</Form.Label> <br />
          <Form.Control
            className='LargeInput'
            type="file"
            name='image'
            accept="image/*"
            onChange={handleFileChange}
            size="lg" 
          />
        </Form.Group>
      </Form>
    </div>
  )
}

避坑提示

前端请求自有后端上传接口时，不要手动添加Content-Type: multipart/form-data请求头，浏览器会自动携带正确的boundary参数，手动添加反而会导致服务端解析文件失败。
你当前server.js中的cors配置origin: "*"和credentials: true是冲突的，如果后续需要接口携带cookie认证，要将origin改为前端实际部署的具体域名，不能用通配符。
如果后续要切换到imgur等其他图床，只需要修改后端转发的接口地址、参数格式即可，前端逻辑不需要改动。

内容的提问来源于stack exchange，提问作者Yamakyu

React+Express项目上传图片至第三方图床时遇到CORS问题求助

核心问题原因 #

先解决node-fetch导入报错问题 #

完整代理上传实现步骤 #

第一步：后端配置 #

第二步：前端React组件修改 #