使用JavaScript通过WordPress API上传图片遇问题求助

你遇到的核心问题是手动设置multipart/form-data请求头导致的双重矛盾：浏览器自动生成的该请求头会包含boundary分隔符，手动添加的头没有这个关键信息，服务器无法正确解析表单数据；同时手动加头会触发额外的CORS预请求，哪怕服务器配置了规则，也可能因为头格式不匹配报错。

直接按下面的步骤修改代码就能解决问题：

关键修改点 #

• 删掉手动设置的Content-Type: multipart/form-data，让浏览器自动生成包含boundary的正确请求头
• 给FormData中的Blob添加文件名和MIME类型，WordPress需要这个来识别文件类型
• 增加错误捕获逻辑，方便排查后续问题

修改后的代码 #

const uploadImage = async (originalPost) => {
    try {
        const mediaID = originalPost.featured_media;
        const media = await getPetition(`${D_P_C_DOMAIN_ORIGIN}/wp-json/wp/v2/media/${mediaID}`, 'GET');
        const mediaUrl = media.source_url;
        
        // 从原图片URL提取文件名，保证上传时文件标识正确
        const fileName = mediaUrl.split('/').pop();
        
        const fileRes = await fetch(mediaUrl, { method: 'GET' });
        if (fileRes.ok) {
            const blob = await fileRes.blob();
            const formData = new FormData();
            // 第三个参数传入文件名，帮助WordPress识别文件类型
            formData.append('file', blob, fileName);
            
            const TOKEN = btoa(`${D_P_C_USERNAME_DESTINATION}:${D_P_C_PASSWORD_DESTINATION}`);
            const uploadRes = await fetch(`${D_P_C_DOMAIN_DESTINATION}/wp-json/wp/v2/media/`, {
                headers: {
                    'Authorization': `Basic ${TOKEN}`
                    // 移除手动设置的Content-Type，由浏览器自动生成
                },
                method: 'POST',
                body: formData
            });
            
            if (!uploadRes.ok) {
                throw new Error(`上传失败：${uploadRes.statusText}`);
            }
            
            const responseMedia = await uploadRes.json();
            console.log(responseMedia);
        }
    } catch (err) {
        console.error('上传出错:', err);
    }
};

额外检查项 #

1. 确认目标WordPress服务器的CORS配置包含：
   • 允许POST请求方法
   • 允许Authorization请求头
   • 响应头包含Access-Control-Allow-Origin（生产环境建议设置为你的前端域名，而非*）
2. 原图片URL所在服务器要允许跨域访问，否则fetch图片时会先触发CORS错误

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