如何连接后端（python、flask）与前端（html、css、javascript）
Bog*_*etu 6 javascript python post get flask
信息：对于后端，我使用带有 Flask 的 python（目前它接受 http get 方法），对于前端，我使用 html、css 和 javascript。
问题：我正在尝试发出 http 请求（第一次尝试 POST，然后 GET），但浏览器不允许我这样做：“从原点 'null' 访问 'localhost:5000/test' 处的 XMLHttpRequest 有被 CORS 策略阻止：跨源请求仅支持以下协议方案：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)
我希望在浏览器控制台中打印消息：“它正在工作”，但出现错误：从源“null”访问“localhost：5000/test”处的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。
LE：Flask 服务器位于 docker 容器内。端口映射为“5000:5000”。
如果您使用同一台机器，则不需要使用flask-cors.
更新： \n当您使用 Docker 时，您可以使用它flask-cors来处理 CORS。
我发现您的 JS 代码中的 AJAX 调用不正确。const url = "localhost:5000/test";不提供有关请求协议的信息。
我按照以下步骤使用 Docker 成功运行 Flask 应用程序，并/test使用 Docker 外部的 JS 访问端点。
- \n
- 我更新了 AJAX 请求 \n
- 添加
Dockerfile到在 Docker 内运行 Flask 应用程序 \n - 构建并运行
Dockerfile\n - 获取正在运行的 Docker 容器的 IP 地址。 \n
- 在 Docker 外部的 JS 代码中的 AJAX 调用中使用了 IP 地址。 \n
文件夹结构：
\n\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 backend.py\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Dockerfile\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 readme.md\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 requirements.txt\nrequirements.txt:
Flask==1.0.2\nFlask-Cors==3.0.7\nDockerfile:
FROM python:3\nENV PYTHONBUFFERED 1\nRUN mkdir /code\nWORKDIR /code\nADD requirements.txt /code/\nRUN pip install -r requirements.txt\nADD . /code/\nCMD ["python", "backend.py" ]\n构建 Docker 文件：
\n\ndocker build -t flask-docker .\n运行 Docker：
\n\ndocker run -p 5000:5000 flask-docker\n\n* Serving Flask app "backend" (lazy loading)\n* Environment: production\n WARNING: Do not use the development server in a production environment.\n Use a production WSGI server instead.\n* Debug mode: off\n* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)\n获取 Docker 容器 ID：
\n\ndocker ps\n\nCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES\n69cb7d5d243a flask-docker "python backend.py" 15 minutes ago Up 15 minutes 0.0.0.0:5000->5000/tcp\n获取Docker容器IP地址：
\n\ndocker inspect --format \'{{ .NetworkSettings.IPAddress }}\' 69cb7d5d243a \n\n172.17.0.2\n在 HTML 文件中的 AJAX 请求中使用此 IP 地址：
\n\n<html>\n<head>\n <title>Frontend</title>\n</head>\n<body>\n <div id="data"></div>\n <button type="button" id="btn">Grab data</button>\n <script type="text/javascript">\n document.getElementById("btn").addEventListener(\'click\', add);\n function add()\n {\n const api_url = "http://172.17.0.2:5000/test";\n var xhttp = new XMLHttpRequest();\n xhttp.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n document.getElementById("data").append(this.responseText);\n }\n };\n xhttp.open("GET", api_url, true);\n xhttp.send();\n }\n </script>\n</body>\n</html> \nbackend.py:
from flask import Flask, request, jsonify\nfrom flask_cors import CORS\n\n\napp = Flask(__name__)\nCORS(app) \n\n@app.route("/test")\ndef test():\n return "It\'s working" \n\nif __name__ == "__main__":\n app.run(host=\'0.0.0.0\', port=5000)\n输出：
\n\n
- 呵呵，现在正在运行。我要做的就是包含flask_cors（我之前尝试过），但另一个问题是（正如您之前所说）我的javascript请求是错误的。不需要提供容器 IP，因为操作系统（或 docker？或两者？）可以进行路由。（我在邮递员中看到了这一点（邮递员中的网址是 localhost:5000/test）并且运行良好）。所以，就我而言，它正在与 localhost:5000/test 一起使用。谢谢你，阿修！！^_^ (2认同)
| 归档时间： |
|
| 查看次数： |
13967 次 |
| 最近记录： |