我是 Kubernetes 的新手，这是我第一次将 react-django Web 应用程序部署到 Kubernetes 集群。

我创造了：

1. frontend.yaml # 运行 npm 服务器
2. backend.yaml # 运行 django 服务器
3. backend-service.yaml # 使 Django 服务器可访问以进行react。

在我的 frontend.yaml 文件中，我传递REACT_APP_HOST并REACT_APP_PORT作为环境变量并将我的react应用程序中的 URL 更改为：

axios.get('http://'+`${process.env.REACT_APP_HOST}`+':'+`${process.env.REACT_APP_PORT}`+'/todolist/api/bucket/').then(res => {
      setBuckets(res.data);
      setReload(false);
    }).catch(err => {
      console.log(err);
    })

我的网址变成 http://backend-service:8000/todolist/api/bucket/

这backend-service是我使用 env 变量传递的后端服务的名称REACT_APP_HOST。

我没有收到任何错误，但是当我使用kubectl port-forward <frontend-pod-name> 3000:3000和访问时，localhost:3000我看到了我的 react 应用程序页面，但它没有遇到任何 django api。

在 chrome 上，我收到错误：

net::ERR_NAME_NOT_RESOLVED

在 Mozilla 中：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://backend-service:8000/todolist/api/bucket/. (Reason: CORS request did not succeed).

请帮助解决这个问题，我花了 3 天时间但没有得到任何想法。

前端.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  creationTimestamp: null
  labels:
    app: frontend
  name: frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  strategy: {}
  template:
    metadata:
      creationTimestamp: null
      labels:
        app: frontend
    spec:
      containers:
      - image: 1234567890/todolist:frontend-v13
        name: react-todolist
        env:
          - name: REACT_APP_HOST
            value: "backend-service"
          - name: REACT_APP_PORT
            value: "8000"
        ports:
          - containerPort: 3000
        volumeMounts:
          - mountPath: /var/log/
            name: frontend
        command: ["/bin/sh", "-c"]
        args:
          - npm start;
      volumes:
        - name: frontend
          hostPath:
            path: /var/log/

后端.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  creationTimestamp: null
  labels:
    app: backend
  name: backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      creationTimestamp: null
      labels:
        app: backend
    spec:
      serviceAccountName: backend-sva
      containers:
      - image: 1234567890/todolist:backend-v11
        name: todolist
        env:
          - name: DB_NAME
            value: "todolist"
          - name: MYSQL_HOST
            value: "mysql-service"
          - name: MYSQL_USER
            value: "root"
          - name: MYSQL_PORT
            value: "3306"
          - name: MYSQL_PASSWORD
            value: "mysql123"
        ports:
          - containerPort: 8000
        volumeMounts:
          - mountPath: /var/log/
            name: backend
        command: ["/bin/sh", "-c"]
        args:
          - apt-get update;
            apt-get -y install vim;
            python manage.py makemigrations bucket;
            python manage.py migrate;
            python manage.py runserver 0.0.0.0:8000
      volumes:
        - name: backend
          hostPath:
            path: /var/log/

后端服务.yaml

apiVersion: v1
kind: Service
metadata:
  creationTimestamp: null
  labels:
    app: backend
  name: backend-service
spec:
  ports:
  - port: 8000
    targetPort: 8000
  selector:
    app: backend
status:
  loadBalancer: {}

前端docker文件

FROM node:14.16.1-alpine

COPY package.json /app/react-todolist/react-todolist/
WORKDIR /app/react-todolist/react-todolist/

RUN npm install

COPY . /app/react-todolist/react-todolist/

EXPOSE 3000

后台docker文件

FROM python:3.6

COPY requirements.txt ./app/todolist/
WORKDIR /app/todolist/

RUN pip install -r requirements.txt

COPY . /app/todolist/

Django 设置

CORS_ORIGIN_ALLOW_ALL=True

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # Rest Frame Work
    'rest_framework',
    # CORS
    'corsheaders',

    # Apps
    'bucket',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

入口.yaml

apiVersion: extensions/v1beta1

kind: Ingress

metadata:
  name: todolist-ingress

spec:
  rules:
    - host: kubernetes.docker.internal
      http:
       paths:
        - path: /
          backend:
            serviceName: frontend-service
            servicePort: 3000
        
        - path: /
          backend:
            serviceName: backend-service
            servicePort: 8000
  

react axios api

useEffect(() => {
    axios.get('http://'+`${process.env.REACT_APP_HOST}`+':'+`${process.env.REACT_APP_PORT}`+'/todolist/api/bucket/', {
      headers: {"Access-Control-Allow-Origin": "*"}
    }).then(res => {
      setBuckets(res.data);
      setReload(false);
    }).catch(err => {
      console.log(err);
    })
  }, [reload])

网络应用程序 github 链接 https://github.com/vgautam99/ToDoList