Communication through HTTP requests is not supported between docker containers

I currently have two applications running as services within a docker-compose environment.

  1. My React App
  2. A Node.js server

In an attempt to make an HTTP request from my React app to the Node.js server, I am using: fetch("http://backend:4000/")

However, when I access my React app at http://localhost:3000, I encounter the error message 

GET http://backend:4000/ net::ERR_NAME_RESOLUTION_FAILED
in the browser.

Shown below is my docker-compose file configuration.

version: "3.7"

services:
  frontend:
    build:
      context: ./frontend
    volumes:
      - ./frontend:/app
    ports:
      - "3000:3000"
    depends_on:
      - "backend"

  backend:
    build:
      context: ./backend
    volumes:
      - ./backend:/app

I am utilizing Ubuntu operating system and have been struggling with this issue for quite some time. Despite various attempts such as creating networks and assigning services to them, as well as establishing links among them, the problem persists.

An interesting observation I made was that when I access the React app container and execute the following commands in the terminal: ping backend or curl http://backend:4000, the request successfully goes through without any issues.

javascriptdockerdocker-compose

Answer №1

It seems like you may be attempting to link your backend application through your browser instead of using the frontend container. To do this, you need to expose the backend port as shown below:


  backend:
    container_name: backend
    build:
      context: ./backend
    volumes:
      - ./backend:/app
    ports:  
      - "4000:4000"

After that, adjust the URL from to http://localhost:4000 in your react application.

Answer №2

version: "3.7"

services:
  frontend:
    build:
      context: ./frontend
    volumes:
      - ./frontend:/app
    ports:
      - "3000:3000"
    depends_on:
      - "backend"
    links:
      - backend

  backend:
    container_name: backend
    build:
      context: ./backend
    volumes:
      - ./backend:/app

Incorrect selection

links:
  - "backend:test"

"backend:test" is causing a name resolution error. The correct service name is backend.

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

Firefox fails to render SVG animation

Currently, I'm attempting to incorporate this unique animation into my website: http://codepen.io/dbj/full/epXEyd I've implemented the following JavaScript code in order to achieve the desired effect: var tl = new TimelineLite; tl.staggerFromTo ...

javascriptcssfirefoxsvggsap

Appending a row to a table will not trigger events in Select2

Despite several attempts, I can't seem to get the select2:select event working on dynamically added rows in a table using select2. The event only works on the original row. Unfortunately, I don't have any additional details about this issue. COD ...

javascriptjqueryhtmllaraveljquery-select2

Upon transitioning from typescript to javascript

I attempted to clarify my confusion about TypeScript, but I'm still struggling to explain it well. From my understanding, TypeScript is a strict syntactical superset of JavaScript that enhances our code by allowing us to use different types to define ...

javascripttypescripttsc

"Make updates to the data with the help of a button input

I am working on a form that has two input type buttons. The first button is labeled "edit", and when clicked, it enables the input field. The second button is labeled "save", and when clicked, it disables the input field and should save the new values in a ...

javascriptphpjquery

Generate a compressed file from a readable source, insert a new document, and transfer the output

The objective is to obtain an archive from the client, include a file, and transfer it to Cloud Storage without generating a temporary file. Both the client and server utilize the archiver library. The issue with the code snippet provided is that the file ...

javascriptnode.jsexpressgoogle-cloud-platformstream

Accessing dropdown selection in Javascript-Json: A Comprehensive Guide

My dropdown list is being populated dynamically using json. The selected option from the first dropdown determines the options in a secondary dropdown. I need to use the selection from the second dropdown to automatically fill out two more fields. For exa ...

javascriptjqueryajaxjsonlist

Guidelines on centering an AJAX spinning animation within a parent div

Below is the basic structure of an HTML document for a webpage. <div class="grand-parent"> <div class="header">Heading</div> <div class="parent-div"> <div class="child-div-1"></div> ...

javascriptjqueryhtmlcssajax

Node development does not operate continuously

I'm facing a minor issue with node-dev. I followed the instructions in the readme file and successfully installed it. However, when I run the command like so: node-dev somescript.js, it only runs once as if I used regular node without -dev. It doesn&a ...

javascriptnode.jsnode-dev

Material UI React Autocomplete Component

I'm currently working on integrating an Autocomplete component using the Material UI library. However, I've encountered a challenge - I'm unsure of how to properly pass the value and onChange functions, especially since I have a custom Text ...

javascriptreactjstypescriptautocompletematerial-ui

What is the best way to clear an array?

Yesterday I had a query regarding JSON Check out this link for details: How to return an array from jQuery ajax success function and use it in a loop? One of the suggested answers included this script: setInterval(updateTimestamps,30000); var ids = new ...

javascriptphparraysjsonajax

What is the best way to implement an automatic logout feature in PHP?

I develop websites with login/logout functionality. Whenever a link or button is clicked on the website, I use an ajax function to verify the user's login status and automatically log them out if their session has expired. The logout function also up ...

javascriptphpjqueryajax

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...

javascriptcssfunctiononclicktextcolor

The integration of a side panel with a chrome extension is experiencing issues

I am working on a chrome extension with the following functionalities - Extract URL path from a specific webpage. (The webpage's URL remains constant) Open this URL in a new tab. It can be either http:// or https://. Embed an iframe containing a sim ...

javascripthtmlgoogle-chrome

Learn the secrets of displaying a pop-up alert message seamlessly without interrupting the page's rendering process. Additionally, discover how to effortlessly refresh a chart every

I need to display a pop-up if the value is less than 3. I have tried using the alert function, but it causes the page to not render. How can I show the pop-up without blocking the page and refresh the chart every 30 seconds? <script> ...

javascriptangularjsjsonajaxfusioncharts

Leveraging the power of Map and Sort to display the items containing image URLs alongside their respective timestamps

I'm diving into firebase and utilizing react, and currently I've come across this snippet of code: {photos.map(url => ( <div key={url} style={card}> <img src={url} style={image} /> <div s ...

javascriptreactjsobjectjavascript-objects

A collection of items that mysteriously affix themselves to the top of the page as

Unique Context In my webpage, I have a specific div element with the CSS property of overflow: auto. Within this scrolling div, there is structured content like this: <h3>Group A</h3> <ul> <li>Item 1</li> <li>I ...

phpjavascriptjqueryhtmlcss

Exploring the functionalities of AngularJS' ng-options when working with select elements

In my search through other posts, I came across this issue but couldn't find a solution. Here is the array in question: $scope.items = [ {ID: '000001', Title: 'Chicago'}, {ID: '000002', Title: 'New York' ...

javascriptangularjshtml-selectng-options

Initialize React Native project

Which ruby command shows the path to Ruby: /Users/User/.rbenv/shims/ruby Ruby -v command displays the version of Ruby installed: ruby 2.7.5p203 (2021-11-24 revision f69aeb8314) [x86_64-darwin21] Which bundle command reveals the path to Bundler: /Users/Us ...

javascriptreactjsrubyreact-native

Tips on incorporating several class names into Next.js elements

My current challenge involves an unordered list element with the following structure: <ul className={styles["projects-pd-subdetails-list"]}> {detail.subdetails.map((sub) => ( <li className={styles[ ...

javascriptcssreactjsnext.js

Learn the process of flipping an element when a button is clicked!

I want to use the jquery flip.js library to flip an element. However, I only want the element to flip when I click on a specific flip button, and then flip back again when another button is clicked. Any suggestions on how to achieve this functionality? ...

javascriptjqueryhtml