[英]How to connect backend (python, flask) with frontend (html, css, javascript)
信息:对于后端,我正在使用带有flask的python(目前它接受http get方法),对于前端,我正在使用html,css和javascript。
问题:我正在尝试发出http请求(第一次尝试POST,然后尝试GET),但是浏览器不允许我这样做:“从源'null'访问'localhost:5000 / test'处的XMLHttpRequest有已被CORS政策阻止:跨协议请求仅支持以下协议方案:http,数据,chrome,chrome扩展名,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)
我希望在浏览器控制台中显示以下消息:“正在运行”,但我收到错误:CORS策略已阻止从源“ null”访问“ localhost:5000 / test”处的XMLHttpRequest:交叉源请求仅支持协议方案:http,数据,chrome,chrome扩展名,https。
LE:Flask服务器位于docker容器内。 端口映射为“ 5000:5000”。
如果您使用的是同一台机器,则无需使用flask-cors
。
更新:使用Docker时,您可以使用flask-cors
处理CORS。
我发现您的JS代码中的AJAX调用不正确。 const url = "localhost:5000/test";
不提供有关请求协议的信息。
我按照以下步骤使用Docker成功运行Flask应用程序,并在Docker外部使用JS访问/test
端点。
Dockerfile
以在Docker内部运行Flask应用程序 Dockerfile
资料夹结构:
.
├── 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)
输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.