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.


const corsOptions = {
    origin: `${process.env.FRONTEND}`,
    credentials: true,
    preflightContinue: false,
    optionsSuccessStatus: 204


// Create Posts'/post/newPost', upload.single('photo'), [
    check("title", "A title is required and must be at least 5 characters long")
        .isLength({ min: 5 })
    check("category", "A category is required")
    check("post", "A post is required and must be at least 5 characters long")
        .isLength({ min: 5 })
], (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,
            photo: path

            .then((post) => {
                res.set({ 'Content-Type': 'multipart/form-data' });
            }).catch((err) => {



React Create Post using React Hook Form

 const submitNewPost = (data) => {
        const formData = new FormData()
        formData.append('user', data.user);
        formData.append('title', data.title);
        formData.append('category', data.category);

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


PostDetails.js: Show Photo only if photo exists

{ && <img src={`${process.env.REACT_APP_URL}${}`} 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.