如何將后端（python，flask）與前端（html，css，javascript）連接
[英]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”。
2 個解決方案
解決方案1
1 2019-04-06 13:04:09
解決方案2
1 已采納 2019-04-06 13:22:00
如果您使用的是同一台機器，則無需使用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)
輸出：
如何連接前端和后端
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.