Nuxt•4mo ago

net::ERR_ADDRESS_UNREACHABLE

I try to access a local API on my laptop (Docker container run by OrbStack). However, when fetching the URL, Nuxt returns net::ERR_ADDRESS_UNREACHABLE in the console. I don’t understand what I am missing knowing that it does work with other apps like Hoppscotch.

2 Replies

kapa.ai•4mo ago

Hi @Luc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error net::ERR_ADDRESS_UNREACHABLE when accessing a local API from a Nuxt app running in a Docker container (such as with OrbStack) is commonly related to networking and how Docker containers resolve host addresses. Based on the knowledge sources, here are some key points and troubleshooting steps: 1. Docker Networking and Host Access
When your Nuxt app runs inside a Docker container, using localhost or 127.0.0.1 in your API URL will refer to the container itself, not your host machine. This is a common source of confusion. Other tools like Hoppscotch may run on your host and can access localhost directly, but containers are isolated by default. 2. Correct API Base URL
If you want your containerized Nuxt app to access an API running on your host, you need to use the special DNS name host.docker.internal (on Mac and Windows) instead of localhost. For example:

   <http://host.docker.internal:YOUR_API_PORT>

   <http://host.docker.internal:YOUR_API_PORT>

This allows the container to reach services running on your host machine. 3. Nuxt Configuration for Networking
Ensure your Nuxt app is configured to listen on all interfaces, not just localhost. In Docker, set the HOST environment variable to 0.0.0.0 or configure it in your nuxt.config:

   export default defineNuxtConfig({
     server: {
       port: 3000,
       host: '0.0.0.0'
     }
   })

   export default defineNuxtConfig({
     server: {
       port: 3000,
       host: '0.0.0.0'
     }
   })

Or in your Docker Compose:

   environment:
     HOST: 0.0.0.0
     PORT: 3000

   environment:
     HOST: 0.0.0.0
     PORT: 3000

This ensures Nuxt is accessible from outside the container, including from Nginx or other services in your Docker network Dockerized nginx and vue+nuxt cannot connect to frontend server 111: Connection refused Part 3. 4. Check Docker Network
If your API is also running in a container, ensure both containers are on the same Docker network and use the service name as the hostname in your API URL. If the API is on the host, use host.docker.internal as above. 5. Summary
The issue is not specific to Nuxt, but to Docker networking. Update your API URLs and Nuxt server configuration as described, and the error should be resolved. If you follow these steps and still encounter issues, please provide your API URL, Docker setup, and relevant Nuxt configuration for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@403539440120627213> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

net::ERR_ADDRESS_UNREACHABLE

Did you find this page helpful?