How to deal with vue ERR_NAME_NOT_RESOLVED? [duplicate]

Question

I use docker-compose to create a web service like this. When I enter "frontend" container and curl http://backend:5000, it will return 200. But when I open the web http://localhost/login, I always get this error message at login page.

POST http://backend:5000/login net::ERR_NAME_NOT_RESOLVED

How should I fix this error?

Here is my environment and code.

docker ps

IMAGE      COMMAND                  PORTS                   NAMES        
backend    "uvicorn app.main:ap…"   0.0.0.0:5000->5000/tcp  backend                     
frontend   "docker-entrypoint.s…"   0.0.0.0:80->8080/tcp    frontend
postgres   "docker-entrypoint.s…"   5432/tcp                postgres

docker-comepose.yml

version: '2'
services:
    frontend:
        container_name: frontend
        build: "frontend/."
        ports:
          - "80:8080"
    backend:
        container_name: backend
        build: "backend/."
        ports:
          - "5000:5000"
    db:
        container_name: postgres
        image: postgres
        restart: always
        environment:
          - POSTGRES_PASSWORD=******

Myconfig.js

export const Myconfig = {
    // Server configuration
    backend_url:'http://backend:5000'
};

Login.vue

import axios from "axios";
import { Myconfig } from "./Myconfig";
import { mapMutations } from 'vuex';

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please Enter your Password!"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    return {
      ruleForm: {
        account: "",
        pass: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
      },
      backend_url: Myconfig.backend_url,
    };
  },

package.json

{
  "name": "PROJECT NAME",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "element-ui": "^2.8.11",
    "vue": "^2.6.11",
    "vue-cookies": "^1.6.1",
    "vue-router": "^3.5.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
} 

Answer 1

as I have answered the similar question check answer on this post (even tho it was react based)

But core of the issue is:

Applications run in your browser, whereas if you deploy an application stack somewhere else, the REST of the services (APIs, DB and such) do not. So referencing your IP/DNS/localhost inside your application won't work, because there is nothing there. A container that contains a WEB application is there to only serve your browser (client) files and then the JS and the logic are executed inside your browser, not the container. I suspect this might be affecting your ability to connect to the backend. To solve this you have two options.

• Create an HTTP proxy as an additional service and your FE calls that proxy (set up a domain and routing), for instance, Nginx, Traefik, ... and that proxy then can reference your backend with the service name, since it does live in the same environment than API.
• Expose the HTTP port directly from the container and then your FE can call remoteServerIP:exposedPort and you will connect directly to the container's interface. (NOTE: I do not recommend this way for real use, only for testing direct connectivity without any proxy)