Hur man kopplar backend (Python, Flask) med frontend (HTML, CSS, JavaScript)

Info: för backend använder jag Python med Flask (för närvarande accepterar det HTTP GET-metoder) och för frontend använder jag HTML, CSS och JavaScript.

Problem: Jag försöker göra en HTTP-förfrågan (första gången försökte jag POST och sedan GET) men webbläsaren tillät mig inte göra det: "Access to XMLHttpRequest at 'localhost:5000/test' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.".

Vilka andra alternativ har jag? (Jag skulle vilja ha några enkla alternativ, det är bara en läxa).

Jag har försökt göra HTTP POST- och GET-förfrågningar. Jag har läst att jag inte kan göra HTTP-förfrågningar från webbläsaren. Jag har läst att jag behöver (till exempel) en Apache-server. - för komplicerat, jag behöver något enklare. Jag har försökt: 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)

Jag förväntar mig att meddelandet: "Det fungerar" ska skrivas ut i webbläsarens konsol, men jag får felet: Åtkomst till XMLHttpRequest på 'localhost:5000/test' från ursprung 'null' har blockerats av CORS-policy: CORS-förfrågningar stöds endast för protokollscheman: http, data, chrome, chrome-extension, https.

LE: Flask-servern är inne i en docker-container. Portarna är mappade "5000:5000".

Svar #1

Om du använder samma maskin behöver du inte använda flask-cors.

Uppdatering: Eftersom du använder Docker kan du använda flask-cors för att hantera CORS.

Jag upptäckte att AJAX-anropen inte var korrekta i din JS-kod. const url="localhost:5000/test"; ger ingen information om begäransprotokoll.

Jag följde dessa steg för att köra Flask-applikationen framgångsrikt med Docker och komma åt /test-ändpunkten med JS utanför Docker.

• Jag uppdaterade AJAX-förfrågan
• La till Dockerfile för att köra Flask-applikation inne i Docker
• Bygg och kör Dockerfile
• Hämta IP-adressen för en körande Docker-container.
• Använde IP-adressen i AJAX-anrop i JS-kod som är utanför Docker.

Mappstruktur:

.
├── 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" ]

Bygg Docker-fil:

docker build -t flask-docker .

Kör 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)

Hämta Docker-container-ID:

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

Hämta Docker-behållarens IP-adress:

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

172.17.0.2

Använd denna IP-adress i AJAX-förfrågan i HTML-filen:

<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)

Utdata:

Svar #2

Lägg till följande rad nedanför app=Flask(__name__):

CORS(app)

Kolla in flask-cors enkel användning