我的请求在 Postman 中有效，但在浏览器中无效（React、Node、Cloudinary）

Question

我有一个页面，我在 NodeJs + MongoDb 中创建了后端，并在 React 中创建了前端。在后端，我有一个中间件，用于将图像上传到 Cloudinary。例如，一条路线是创建一个新宠物，当我使用 Postman 进行发布请求时，一切顺利，新宠物在数据库中创建得很好，并且在图像位置也有 Cloudinary 的 URL。当我尝试对反应中的表单执行相同操作时，问题就来了……一切都“很好”，但是在图像位置（邮递员在哪里我有 clodinary url），现在是空的……

节点控制器代码：

const petCreatePost = async(req, res, next) => {
    const { type, name, avatar, age, sex, breed, size, isVaccinated, isSterilized, isDewormed, microchip, province, shelter, status } = req.body;

    try {

        const newPet = new Pet({
            type,
            name,
            avatar: req.imageUrl ? req.imageUrl : '',
            age,
            sex,
            breed,
            size,
            isVaccinated,
            isSterilized,
            isDewormed,
            microchip,
            province,
            shelter,
            status
        });

        const createdPet = await newPet.save();

        return res.status(200).json('Mascota creada correctamente', { pet: createdPet });
    } catch (error) {
        return next(error);
    }

}

云中间件：

const multer = require('multer');
const path = require('path');
const fs = require('fs');
const cloudinary = require('cloudinary').v2

const ACCEPTED_FILE = [ 'image/jpg', 'image/jpeg', 'image/png' ];

const fileFilter = (req, file, cb) => {
    if(!ACCEPTED_FILE.includes(file.mimetype)) {
        const error = new Error ('Extensión del archivo inválida.')
        error.status = 400;
        return cb(error);
    }
    return cb(null, true);
};

const storage = multer.diskStorage({
    filename: (req, file, cb) => {
        const fileName = `${Date.now()}-${file.originalname}`;
        cb(null, fileName);
    },
    destination: (req, file, cb) => {
        const directory = path.join(__dirname, '../public/uploads');
        cb(null, directory);
    }
});

const upload = multer({
    storage,
    fileFilter,
});

const uploadToCloudinary = async (req, res, next) => {
    try {
        console.log('req', req);
        if(req.file) {
            const path = req.file.path;
            const image = await cloudinary.uploader.upload(path);
    
            req.imageUrl = image.secure_url;
            console.log('image url', req.imageUrl);
    
            return next();
        } else {
            return next();
        }
    } catch (error) {
        return next(error);
    }
};

module.exports = { upload, uploadToCloudinary };

我如何使用中间件：

router.post('/new', [upload.single('avatar'), uploadToCloudinary], controller.petCreatePost);

反应组件：

import React, { useContext } from 'react';

export const NewPet = () => {

  const submitForm = async (e) => {
    e.preventDefault();

    const { type, name, age, avatar, sex, breed, size, isVaccinated, isSterilized, isDewormed, microchip, province, status } = e.target;

    const form = {
      type: type.value,
      name: name.value,
      age: age.value,
      sex: sex.value,
      breed: breed.value,
      size: size.value,
      isVaccinated: isVaccinated.value,
      isSterilized: isSterilized.value,
      isDewormed: isDewormed.value,
      microchip: microchip.value,
      province: province.value,
      status: status.value
    };

    // const form = new FormData();
    // form.append('type', type.value);
    // form.append('name', name.value);
    // form.append('age', age.value);
    // form.append('sex', sex.value);
    // form.append('breed', breed.value);
    // form.append('size', size.value);
    // form.append('isVaccinated', isVaccinated.value);
    // form.append('isSterilized', isSterilized.value);
    // form.append('isDewormed', isDewormed.value);
    // form.append('microchip', microchip.value);
    // form.append('province', province.value);
    // form.append('status', status.value);
    // form.append('avatar', imagenPrueba);

    try {
      const pet = await newPet(form);
      console.log('pet', pet);

    } catch (err) {
      console.log(err);
    }
  }

注释的代码部分是我尝试使用的替代方法，因为我正在发送文件并且我必须使用 FormData，但也无法正常工作。我还检查了表单是否具有 enctype="multipart/form-data"。

最后是我用来连接到后面的“newPet”功能：

export const newPet = async(form) => {
    const req = await fetch(newPetUrl, {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
        },
        credentials: "include",
        body: JSON.stringify(form),
    });

    const response = await req.json(form);

    if (!req.ok) {
        throw new Error(response.message);
    }

    return response;
};

我希望有人可以帮助我.. 谢谢！

Answer 1

您需要等待来自 cloudinary 的网址。我也有这个问题