如何连接后端(python,flask)与前端(html,css,javascript)

问题描述 投票:0回答:2

信息:对于后端我正在使用python with flask(目前它接受http get方法)和前端我正在使用html,css和javascript。

问题:我正在尝试发出http请求(我第一次尝试POST然后GET)但是浏览器不允许我这样做:“从'localhost:5000'测试'从源'null'访问XMLHttpRequest已经已被CORS策略阻止:仅对协议方案支持跨源请求:http,数据,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)

我希望在浏览器控制台中打印消息:“它正在工作”,但我收到错误:来自'null'的'localhost:5000 / test'访问XMLHttpRequest已被CORS策略阻止:交叉原始请求是仅支持协议方案:http,数据,chrome,chrome-extension,https。

LE:Flask服务器位于docker容器内。端口映射为“5000:5000”。

javascript python post flask get
2个回答
1
投票

如果您使用的是同一台机器,则无需使用flask-cors

更新:当您使用Docker时,您可以使用flask-cors来处理CORS。

我发现你的JS代码中的AJAX调用不正确。 const url = "localhost:5000/test";不提供有关请求协议的信息。

我按照这些步骤使用Docker成功运行Flask应用程序,并使用Docker外部的JS访问/test端点。

  • 我更新了AJAX请求
  • 添加了Dockerfile以在Docker中运行Flask应用程序
  • 建立并运行Dockerfile
  • 获取运行Docker容器的IP地址。
  • 在Docker之外的JS代码中使用AJAX调用中的IP地址。

文件夹结构:

.
├── 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容器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

获取Docker容器IP地址:

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

172.17.0.2

在HTML文件中的AJAX请求中使用此IP地址:

<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
投票

app = Flask(__name__)下面添加以下行:

CORS(app)

查看flask-cors simple usage

© www.soinside.com 2019 - 2024. All rights reserved.