Cómo conectar el backend (python, flask) con el frontend (html, css, javascript)

Info: para el backend estoy usando Python con Flask (por el momento acepta métodos HTTP GET) y para el frontend estoy usando HTML, CSS y JavaScript.

Problema: Estoy tratando de hacer una solicitud http (la primera vez probé POST y luego GET) pero el navegador no me permitió hacerlo: "Acceso a XMLHttpRequest en 'localhost:5000/test' desde el origen 'null' ha sido bloqueado por la política CORS: Las solicitudes de origen cruzado solo son compatibles con esquemas de protocolo: http, data, chrome, chrome-extension, https.".

¿Qué otras opciones tengo? (Me gustaría algunas opciones simples, es solo una tarea).

He intentado hacer solicitudes HTTP POST y GET. He leído que no puedo hacer solicitudes HTTP desde el navegador. He leído que necesito (por ejemplo) un servidor Apache. - demasiado complicado, necesito algo más simple. He intentado: https://flask-cors.readthedocs.io/en/latest/

document.getElementById("btn").addEventListener('click', add);
function add()
{
    const url = "localhost:5000/test";
    const http = new XMLHttpRequest();
    http.open("GET", url);
    http.send();
    http.onreadystatechange=(e)=> {
        console.log(http.responseText)
    }
}

from flask import Flask
from flask_cors import CORS
from flask import request
from flask import jsonify
import json
import mysql.connector
import random
import string
import time

time.sleep(3)
app = Flask(__name__)

@app.route("/test")
def test():
    return "It's working"


if __name__ == "__main__":
    app.run(host='0.0.0.0', port=5000)

Espero que en la consola del navegador se imprima el mensaje: "Está funcionando", pero recibo el error: Acceso a XMLHttpRequest en 'localhost:5000/test' desde el origen 'null' ha sido bloqueado por la política CORS: Las solicitudes de origen cruzado solo son compatibles con los esquemas de protocolo: http, data, chrome, chrome-extension, https.

LE: El servidor Flask está dentro de un contenedor Docker. Los puertos están mapeados "5000:5000".

Respuesta #1

Si estás usando la misma máquina, no necesitas usar flask-cors.

Actualización: Como estás usando Docker, puedes usar flask-cors para manejar CORS.

Descubrí que las llamadas AJAX no eran correctas en tu código JS. const url="localhost:5000/test"; no proporciona información sobre el protocolo de la solicitud.

Seguí estos pasos para ejecutar la aplicación Flask con éxito usando Docker y accediendo al endpoint /test usando JS fuera de Docker.

Actualicé la solicitud AJAX
Se añadió Dockerfile para ejecutar la aplicación Flask dentro de Docker
Construye y ejecuta el Dockerfile
Obtén la dirección IP del contenedor Docker en ejecución.
Usó la dirección IP en la llamada AJAX en el código JS que está fuera de Docker.

Estructura de carpetas:

.
├── backend.py
├── Dockerfile
├── readme.md
└── requirements.txt

requirements.txt:

Flask==1.0.2
Flask-Cors==3.0.7

Dockerfile:

FROM python:3
ENV PYTHONBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install -r requirements.txt
ADD . /code/
CMD ["python", "backend.py" ]

Construir archivo Docker:

docker build -t flask-docker .

Ejecutar Docker:

docker run -p 5000:5000 flask-docker

* Serving Flask app "backend" (lazy loading)
* Environment: production
  WARNING: Do not use the development server in a production environment.
  Use a production WSGI server instead.
* Debug mode: off
* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)

Obtener ID del contenedor Docker:

docker ps

CONTAINER ID        IMAGE                   COMMAND                CREATED             STATUS              PORTS                    NAMES
69cb7d5d243a        flask-docker            "python backend.py"    15 minutes ago      Up 15 minutes       0.0.0.0:5000->5000/tcp

Obtener la dirección IP del contenedor Docker:

docker inspect --format '{{ .NetworkSettings.IPAddress }}' 69cb7d5d243a  

172.17.0.2

Use esta dirección IP en la solicitud AJAX en el archivo HTML:

<html>
<head>
  <title>Frontend</title>
</head>
<body>
  <div id="data"></div>
  <button type="button" id="btn">Grab data</button>
  <script type="text/javascript">
  document.getElementById("btn").addEventListener('click', add);
  function add()
  {
    const api_url = "http://172.17.0.2:5000/test";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("data").append(this.responseText);
      }
    };
    xhttp.open("GET", api_url, true);
    xhttp.send();
  }
  </script>
</body>
</html>

backend.py:

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


app = Flask(__name__)
CORS(app)    

@app.route("/test")
def test():
    return "It's working"    

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=5000)

Resultado:

Respuesta #2

Agrega la siguiente línea debajo de app=Flask(__name__):

CORS(app)

Mira el uso simple de flask-cors