Attempting to retrieve blog posts through an API call but receiving an error message indicating that the

In the blog application I developed, the home page is supposed to display blog posts from all authors with images of the posts and their profile pictures. However, I am encountering an issue where the images are not being displayed due to a (failed)net::ERR_BLOCKED_BY_ORB error in the network requests. Additionally, when new blog posts are created, the images temporarily appear but later disappear when revisiting the website.

useEffect(() => {
    const fetchPosts = async () => {
        setIsLoading(true);
        try {
            const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/posts`);

            console.log("API Response:", response); // Logging the API response

            setPosts(response?.data);

        } catch (err) {
            console.log("Error fetching posts:", err); // Logging errors
        }

        setIsLoading(false);
    };

    fetchPosts();

}, []);

I have tried checking the console log for any issues but cannot find any problems related to user info display

Answer №1

The occurrence of net::ERR_BLOCKED_BY_ORB signifies that the browser is preventing the request from being made because of security configurations. This typically happens when attempting to retrieve assets from a domain that differs from where your website is situated.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unexpected jQuery error: Uncaught TypeError - Invocation not allowed

Yesterday, the code was functioning perfectly, but today it suddenly started throwing an error: Uncaught TypeError: Illegal invocation I'm struggling to pinpoint where exactly the issue lies. function createFile() { var selected_retailer_uui ...

Search for all items that share the same identification numbers in JavaScript

Trying to parse through my students array to find all objects with matching ids and extract other property values from them has been challenging... Consider the following sample array: const students = [ {id: 1, name: 'Cal', location: &apos ...

Last month's display is currently unidentified

function calculateTime() { var Make_It_12_Hour = true; var currentTime = new Date(); var hour1 = currentTime.getHours() - 1; var hour2 = currentTime.getHours(); var hour3 = currentTime.getHours() + 1; var minutes = currentTime.getM ...

What is the best way to create a text shadow effect for a heading element?

Is it possible to create a centered heading like the one in this image using only CSS, without using flexbox? [EDIT] Below is an example using flexbox. However, there are some limitations with this code as it doesn't allow reusing the same class for ...

Tips for integrating DocuSign API with React.js

I'm looking to explore some DocuSign e-Signature features within a React.js environment. Initially, I want to experiment with the examples provided in this repository https://github.com/docusign/code-examples-node/tree/master/lib/eSignature. The offic ...

What is the best way to customize the endIcon of a styled-component button?

Presented here is a neatly styled button I've created import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; const MyB ...

What method is most effective for duplicating objects in Angular 2?

Is it just me, or does Angular 1.x have methods on the global angular object like angular.copy and angular.shallowCopy that are missing in Angular 2? It seems like there is no equivalent version in Angular 2 documentation. If Angular 2 doesn't plan on ...

The event handler is not defined and is failing to recognize in the React context

Currently, as I delve into the realm of learning React, I find myself facing a perplexing issue regarding the mysterious undefined state of this event handler. Why is it behaving in such an enigmatic manner? const Login = () => { handleSubmit = (e) ...

How come my search query in the input form is unable to locate a user in the table?

I am currently facing an issue with my PHP search functionality. I have a table called "users" and I want to find the user that matches the name inputted by the user and display it on the screen. However, for some reason, the program is not displaying the ...

Disable system discord.js

Hey there, I'm experiencing an issue with my code and could use some help. Every time I try to use my mute command, it keeps spamming "You need permission to use command". Below is the snippet of my code: client.on('message', message => { ...

Experiencing an unexpected issue with Firefox? Seeing unexplained strokes on an image that are not present on other browsers

Currently, I am working on customizing a file input to display its content using a preview <img> tag. <div id="image_preview"> <input> ..... <img id="preview" src="" class="img-fluid" alt=""> </div> While it displa ...

Issue with displaying the Bootstrap paginator stylingSomething seems to be

Currently, I am working on a PHP project that involves creating a table with Bootstrap styling. To achieve this, I referred to a tutorial which guided me through the process. After linking the necessary Bootstrap CSS file using the provided code snippet, ...

HTML is appearing as unformatted text on the screen

I am utilizing deta for rendering cloud-based HTML content. Below is the code snippet in use: from deta import Deta from fastapi import FastAPI, Request, Response, Form, File, UploadFile from fastapi.templating import Jinja2Templates from fastapi.response ...

Ways to restrict HTML styling to just the header section and avoid affecting the entire webpage

As a newcomer to HTML, please excuse my lack of knowledge. I am struggling to keep my current design at the top of my page, similar to a fixed header that follows the user down the page. Currently, the design takes over the entire page, obscuring the bod ...

Managing various iterations of identical repositories

Currently in the process of constructing a library of unique react components that are being utilized in various downstream applications. To incorporate these components into my downstream applications, I rely on the package.json. Recently, I began ponde ...

No matter what I attempt, my presentation refuses to align in the center

My slideshow, which is powered by jQuery/JS and involves absolute positioning for each image, is causing me trouble when trying to horizontally center it on the page. No matter what I do, I can't seem to get it right. The challenge is not only getting ...

Using the click function is not possible once the append function has been applied

After adding TRIGGER DIV A above $(".DIVB").html(data); from an AJAX Response, I am unable to trigger code using $(".TRIGGER DIV A").click(function(). Can anyone clarify why this is happening and suggest a solution or workaround? ...

React does not display arrays containing objects

I am currently working on a program that is designed to wait for an array to be filled before passing it to the setData() function. Despite seeing in the console that the array is full, React is not rendering the data as expected. import { useEffect, useSt ...

Ways to incorporate margins into text on PDF pages produced by Puppeteer without altering the background color

I am currently using puppeteer to generate PDFs that contain dynamic content. My goal is to include margins/padding above and below the text on consecutive pages. Unfortunately, when I try to add margins with the property margin: { top: "1cm", bottom: "1 ...

What is the best way to add information stored in localStorage to an element on the webpage?

At the moment, I am developing a Bookmark manager that stores data in localstorage and then adds the saved data from localstorage to the DOM. However, I am facing an issue where the code inside fetchUrl() is not getting appended to the DOM. Here is what I ...