CROSS IRIGIN READ BLOCK Error when trying to display photo in React?

Hi guys,

I’m trying to display a photo in my post details page. I used Multer in my backend and I’m trying to show it in my React frontend. Right now I can upload a photo because I see the image added to my public/images folder in my server folder. In MongoDB Atlas I see the filename along with the rest of the data I need. I can show the rest of the details of the post: title, post, etc. but right now I keep getting the below error when trying to display my photo. I am using Digital Ocean droplet with nginx. Also looking at chrom devtools in the network tab I see the photo with a status of 200.

How can I solve this issue?

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://MY DO SERVER/public/images/1680208168781-pexels-karolina-grabowska-4466559.jpeg with MIME type text/html. See Chrome Platform Status for more details.

API

const corsOptions = {
    origin: `${process.env.FRONTEND}`,
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    credentials: true,
    preflightContinue: false,
    optionsSuccessStatus: 204
}

router.use(cors(corsOptions))

// Create Posts
router.post('/post/newPost', upload.single('photo'), [
    check("title", "A title is required and must be at least 5 characters long")
        .not()
        .bail()
        .isEmpty()
        .bail()
        .isLength({ min: 5 })
        .bail()
        .trim(),
    check("category", "A category is required")
        .not()
        .bail()
        .isEmpty()
        .bail(),
    check("post", "A post is required and must be at least 5 characters long")
        .not()
        .bail()
        .isEmpty()
        .bail()
        .isLength({ min: 5 })
        .bail()
        .trim(),
], (req, res, next) => {
    const errors = validationResult(req)
    if (!errors.isEmpty()) {
        return res.status(400).json({ errors: errors.array() })
    } else {


        const path = "/public/images/" + req.file.filename;
        const post = {
            user: req.body.user,
            title: req.body.title,
            category: req.body.category,
            post: req.body.post,
            photo: path
        };


        PostService.create(post)
            .then((post) => {
                res.status(200);
                res.set({ 'Content-Type': 'multipart/form-data' });
                res.json(post);
            }).catch((err) => {
                res.status(404);
                res.end();
            });



    }

});

React Create Post using React Hook Form

 const submitNewPost = (data) => {
        console.log(data);
        const formData = new FormData()
        formData.append('user', data.user);
        formData.append('title', data.title);
        formData.append('category', data.category);
        formData.append('post', data.post);
        formData.append('photo', data.photo[0]);

        (async () => {
            try {
                await axios.post(`${process.env.REACT_APP_URL}/api/blog/post/newPost`, formData)
                toast.success("View your profile for your new post!")
                reset()
            } catch (error) {
                if (error.response) setErrorsServer(error.response.data.errors);
                toast.error("Unable to create new post")
            }
        })();
        if (errorsServer) setErrorsServer('')

    }

PostDetails.js: Show Photo only if photo exists

{post.photo && <img src={`${process.env.REACT_APP_URL}${post.photo}`} alt="" />}

I was able to solve my issue by adding the below to my server.js file in my server file. Now I can display a photo in my frontend and I don’t get the CORB error.

app.use('/public', express.static(path.join(__dirname, 'public')))

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.