仅用AntD库在React前端上传图片（无后端）遇CORS问题求助

问题定位 #

你遇到的CORS错误显示请求目标是http://localhost:8010/v2/5cc8019d300000980a055e76，但代码里Upload的action配置的是https://www.mocky.io/v2/5cc8019d300000980a055e76，说明代理配置和代码请求地址没有对应上，导致代理没生效，跨域问题依旧。

解决步骤 #

1. 确保local-cors-proxy启动参数正确 #

启动代理时必须明确指定目标域名，否则代理无法正确转发请求。执行以下命令：

lcp --proxyUrl https://www.mocky.io --port 8010

该命令会将http://localhost:8010下的所有请求转发到https://www.mocky.io，以此绕过同源策略限制。

2. 修改Upload组件的action地址 #

将代码里的action替换为代理地址，让上传请求走代理通道：

const props = {
  name: 'file',
  multiple: false,
  // 替换为代理服务的地址
  action: 'http://localhost:8010/v2/5cc8019d300000980a055e76',
  onChange(info) {
    const { status, response } = info.file;
    if (status === 'done') {
      message.success(`${info.file.name} file uploaded successfully.`);
      setUploadedImage(response.url);
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

3. 备选方案：使用customRequest自定义请求（代理失效时） #

如果代理仍无法解决问题，可以利用AntD Upload的customRequest手动处理上传逻辑，配合axios或fetch控制请求流程：

import axios from 'axios';

const props = {
  name: 'file',
  multiple: false,
  // 移除默认action，改用自定义请求
  customRequest: async ({ file, onSuccess, onError }) => {
    try {
      const formData = new FormData();
      formData.append('file', file);
      const response = await axios.post('https://www.mocky.io/v2/5cc8019d300000980a055e76', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
        // 若用axios内置代理，可添加以下配置
        // proxy: { host: 'localhost', port: 8010 }
      });
      onSuccess(response.data);
      message.success(`${file.name} file uploaded successfully.`);
      setUploadedImage(response.data.url);
    } catch (err) {
      onError(err);
      message.error(`${file.name} file upload failed.`);
    }
  },
};

注意事项 #

• 确认目标接口（如mocky地址）支持POST请求，上传接口默认使用POST方法
• 启动代理后，检查端口是否被占用，确保前端项目与代理服务在同一网络环境下

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