时间戳

首页 > 解决方案 > docker-compose：无法从 Nuxt 容器中访问 Django 容器

django - docker-compose：无法从 Nuxt 容器中访问 Django 容器

问题描述

我的后端 (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, 和 set ALLOWED_HOSTS = ['*']and中CORS_ALLOW_ALL_ORIGINS = True）。

在我的nuxt.config.js我已经设置

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

我不知道出了什么问题。我认为这可能是我的docker-composeor Dockerfile。

码头工人-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

我错过了什么？

标签： djangodockerdjango-rest-frameworkdocker-composenuxt.js

解决方案

我认为你有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_containerdjango 容器的名称。

在 nuxt 配置中，您可以像这样为服务器端和客户端设置不同的 URL。所以 SSR 请求直接转到 docker django 容器，客户端请求转到 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'
  },

  // ...
}

第二个。

从源“http://localhost:5000”访问“http://localhost:8000/preview/api/qc/”处的 XMLHttpRequest 已被 CORS 策略阻止：请求标头字段 access-control-allow-origin 不是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']

推荐阅读