docker-compose：無法從 Nuxt 容器中訪問 Django 容器

Question

我的后端 (localhost:8000) 和前端 (locahost:5000) 容器都啟動並可以通過瀏覽器訪問，但我無法從前端容器訪問后端容器。

從前端內部：

/usr/src/nuxt-app # curl http://localhost:8000 -v
*   Trying 127.0.0.1:8000...
* TCP_NODELAY set
* connect to 127.0.0.1 port 8000 failed: Connection refused
*   Trying ::1:8000...
* TCP_NODELAY set
* Immediate connect fail for ::1: Address not available
*   Trying ::1:8000...
* TCP_NODELAY set
* Immediate connect fail for ::1: Address not available
* Failed to connect to localhost port 8000: Connection refused
* Closing connection 0
curl: (7) Failed to connect to localhost port 8000: Connection refused

我的 nuxt 應用程序（前端）正在使用 axios 調用http://localhost:8000/preview/api/qc/ 。 當前端啟動時，我可以看到 axios 捕獲errorError: connect ECONNREFUSED 127.0.0.1:8000 。 雖然在控制台中顯示[HMR] connected 。

如果我對index.vue進行更改，前端會重新加載，然后在控制台中顯示：

access to XMLHttpRequest at 'http://localhost:8000/preview/api/qc/' from origin 'http://localhost:5000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response. VM11:1 GET http://localhost:8000/preview/api/qc/ net::ERR_FAILED

我已經設置了django-cors-headers （將其包含在INSTALLED_APPS中，並設置ALLOWED_HOSTS = ['*']和CORS_ALLOW_ALL_ORIGINS = True ）。

在我的nuxt.config.js我已經設置

axios: {
  headers : {
    "Access-Control-Allow-Origin": ["*"],
  }
},

我不知道出了什么問題。 我認為這可能是我的docker-compose或Dockerfile 。

docker-compose.yml

backend:
    build: ./backend
    volumes:
        - ./backend:/srv/app
    ports:
        - "8000:8000"
    command: python manage.py runserver 0.0.0.0:8000
    depends_on:
        - db
    networks:
        - main

frontend:
    build:
        context: ./frontend
    volumes:
        - ./frontend:/usr/src/nuxt-app
        - /usr/src/nuxt-app/node_modules
    command: >
        sh -c "yarn build && yarn dev"
    ports:
        - "5000:5000"
    depends_on:
        - backend
    networks:
        - main

networks:
    main:
        driver: bridge

Dockerfile

FROM node:15.14.0-alpine3.10

WORKDIR /usr/src/nuxt-app

RUN apk update && apk upgrade

RUN npm install -g npm@latest

COPY package*.json ./
RUN npm install

EXPOSE 5000

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=5000

我錯過了什么？

Answer 1

我認為你有2個不同的錯誤。

第一個。

我的 nuxt 應用程序（前端）正在使用 axios 調用 http://localhost:8000/preview/api/qc/。 當前端啟動時，我可以看到 axios 捕獲 errorError: connect ECONNREFUSED 127.0.0.1:8000。 雖然在控制台中顯示 [HMR] 已連接。

這是從 nuxt 到 django 的 SSR 請求。 容器內的 Nuxt 應用無法連接到 localhost:8000。 但是您可以通過 http://django_container:8000/api/qc/ 連接到 django 容器，其中django_container是您的 django 容器的名稱。

在 nuxt 配置中，您可以像這樣為服務器端和客戶端設置不同的 URL。 所以 SSR 直接請求 go 到 docker django 容器和客戶端請求 Z34D1F91FB2E514B8576FAB1AZ 到 localhost 端口。

nuxt.config.js

export default {
  // ...

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: process.browser ? 'http://localhost:8000' : 'http://django_container:8000'
  },

  // ...
}

第二個。

CORS 策略已阻止從源“http://localhost:5000”訪問“http://localhost:8000/preview/api/qc/”處的 XMLHttpRequest Access-Control-Allow-Headers 在預檢響應中允許。 VM11:1 GET http://localhost:8000/preview/api/qc/net::ERR_FAILED

這是從您的瀏覽器到 django 的客戶端請求。 我認為最好明確設置CORS_ORIGIN_WHITELIST 。 您也可以允許CORS_ALLOW_CREDENTIALS 。 我不能保證，但我希望它有所幫助。

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = ['http://localhost:5000', 'http://127.0.0.1:5000']