Как связать бэкэнд (python, flask) с внешним интерфейсом (html, css, javascript) - PullRequest
Новая
       44

Как связать бэкэнд (python, flask) с внешним интерфейсом (html, css, javascript)

1 голос
/ 06 апреля 2019

Информация: для бэкэнда я использую python с флягой (на данный момент он принимает методы http get), а для внешнего интерфейса я использую html, css и javascript.

Проблема: я пытаюсьсделать запрос http (впервые я попробовал POST, а затем GET), но браузер не позволил мне сделать это: «Доступ к XMLHttpRequest в« localhost: 5000 / test »из источника« null »был заблокирован политикой CORS: Crossзапросы источника поддерживаются только для схем протокола: http, data, chrome, chrome-extension, https. ".

Какие еще варианты есть у меня?(Мне бы хотелось несколько простых вариантов, это просто домашняя работа.)

Я пытался сделать http POST и GET запрос.Я читал, что не могу сделать http-запрос из браузера.Я прочитал, что мне нужен (например) сервер Apache.- слишком сложно, мне нужно что-то более простое.Я пробовал: 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)

Я ожидаю, что в консоли браузера будет напечатано сообщение: "Это работает ", но я получаю сообщение об ошибке: доступ к XMLHttpRequest в" localhost: 5000 / test "из источника" null "был заблокирован политикой CORS: запросы о перекрестном источнике поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https.

LE: Flask-сервер находится внутри док-контейнера.Порты отображаются "5000: 5000".

Ответы [ 2 ]

1 голос
/ 06 апреля 2019

Если вы используете ту же машину, вам не нужно использовать flask-cors.

Обновление: Поскольку вы используете Docker, вы можете использовать flask-cors для обработки CORS.

Я обнаружил, что вызовы AJAX не верны в вашем коде JS. const url = "localhost:5000/test"; не предоставляет информацию о протоколе запроса.

Я выполнил следующие шаги, чтобы успешно запустить приложение Flask с помощью Docker и получить доступ к конечной точке /test с помощью JS вне Docker.

  • Я обновил AJAX-запрос
  • Добавлено Dockerfile для запуска приложения Flask внутри Docker
  • Сборка и запуск Dockerfile
  • Получить IP-адрес работающего контейнера Docker.
  • Использовал IP-адрес в вызове AJAX в коде JS, который находится за пределами Docker.

Структура папок: 

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

Файл сборки Docker: 

docker build -t flask-docker .

Запустить 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)

Получить идентификатор контейнера 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

Получить IP-адрес контейнера Docker: 

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

172.17.0.2

Используйте этот IP-адрес в запросе AJAX в файле 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)

Выход:

frontend output

1 голос
/ 06 апреля 2019

Добавьте следующую строку ниже app = Flask(__name__): 

CORS(app)

Выезд flask-cors простое использование

...