需要什么才能允许 axios http 请求从我的前端容器发送到我的 azure 容器化 Web 应用程序上的后端容器？

Question

我正在 Azure 应用服务中运行一个容器化 Web 应用程序，该应用程序有两个从我的 Azure 容器注册表中提取的容器映像，并由单个 docker-compose 文件启动：

• 容器 1) 我在端口 80 上提供服务的 React 前端
• container2）我使用gunicorn在端口8000上提供的烧瓶后端（我运行的具体命令是

  gunicorn -w 2 --bind 0.0.0.0:8000 app:app

  ）

当我在本地成功运行这个双容器应用程序时，我的前端 axios http 请求的基本 URL 是“http://localhost:8000”，如下所示：

axios.get('http://localhost:8000/getSomething', { params: {foo: bar}});

这对我来说很有意义，因为在gunicorn启动时，它会说“正在收听：http://0.0.0.0:8000”。

这在 azure web 应用程序中不起作用，我认为这是因为以下原因之一（或可能两者兼而有之）：

1. 我不知道在 axios 请求中使用什么基本 URL。它应该保留“本地主机”吗？我应该将其更改为“0.0.0.0”、默认域 url 或虚拟 IP 地址（后者是 Web 应用程序的属性）吗？

2. 我的网络应用程序还强制https，因此它可能不允许http请求。但如果是这样的话，既然gunicorn听的是http://0.0.0.0:8000，我该怎么办。 （当我使用“http://0.0.0.0:8000”作为我的 axios 基本 URL 时，我从一个错误中得到了这种想法，该错误说“此请求已被阻止；内容必须通过 HTTPS 提供”） .

以上两个潜在问题是我目前正在研究的问题，但如果能提供有关将我的前端与后端 api 容器连接起来实际需要什么的任何指导，我们将不胜感激。 （旁注：目前我的 CORS 政策设置为允许所有内容，因此我很确定这与该问题无关。）

Answer 1

我也有同样的问题。 React 工作得很好，但无法连接到后端。由于 Docker compose 处于预览状态，某些功能可能仍然不支持容器之间的直接通信。

使用

NGINX

作为代理对我有用。

这是我的所有文件

NGINX：

default.conf

:

server {
    listen 80;
    server_name azurewebsites.net;

    location / {
        proxy_pass http://react:80/;
    }

    location /api/ {
        proxy_pass http://flask:8000/;
    }
}

Dockerfile

:

# Use a lightweight Nginx image as the base

FROM nginx:1.25

COPY  default.conf  /etc/nginx/conf.d

反应：

App.jsx

:

import { useEffect, useState } from 'react';
import './App.css';



function App() {
  const [data,setData] = useState({})
  useEffect(()=>{
  fetch('/api/data')
  .then(res => res.json())
  .then(imgurl=> setData(imgurl))
  },[])
  return (
    <>
    <img src={data.message} alt="image" />
    </>
  );
}

export default App;

Dockerfile

:

FROM node:18-alpine AS build

WORKDIR /app

COPY . .

RUN npm install && npm run build


FROM nginx:stable-alpine

COPY --from=build /app/dist /usr/share/nginx/html


EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

烧瓶：

app.py

:

from flask import Flask, jsonify
from flask_cors import CORS
import requests

app = Flask(__name__)

CORS(app)

@app.route('/')
def home():
    return "Welcom to Flask app"
@app.route('/data')
def fetch_articles():

    response= requests.get("https://dog.ceo/api/breeds/image/random")

    return response.json()

if __name__ == '__main__':
    app.run()

requirements.txt

:

flask
requests
gunicorn
flask-cors

Dockerfile

:

FROM python:3.11-alpine

WORKDIR /app

COPY . .

RUN pip install -r requirements.txt

CMD gunicorn -b 0.0.0.0:8000 app:app

docker-compose.yml

version: '3.3'

services:
  nginx:
    image: vivek.azurecr.io/nginx
    ports:
      - "80:80"
    container_name: nginx

  react:
    image: vivek.azurecr.io/react
    ports:
      - "80"
    depends_on:
      - flask
    container_name: react

  flask:
    image: vivek.azurecr.io/flask
    ports:
      - "8000"
    container_name: flask

OUTPUT

：

反应

烧瓶