从 javascript 调用 Flask 服务器上的 Web 服务方法

Question

我是前端开发和网站开发的新手；目标是从网络界面（客户端）调用服务器上的网络服务方法。

上下文

我用 Flask 编写了一个 Python 网络服务，并将其部署在我的 Raspberry Pi 上。我用 ngrok 和 Postman 对其进行了测试，它工作正常，所有方法都完全按照它们的要求进行。
我还有一个网络服务器 (Nginx) 运行在 Raspberry 上。
Python Web 服务在 端口 5000 上公开；覆盆子 IP 192.168.1.4.
addWord 是一个 POST 操作，提供我的网络服务。
最后，PC 和 Raspberry 在同一网络上。

下一步

我想从一个前端网站调用 Python 网络服务的一个方法，一个简单的 HTML 页面，我把它放在我的网络服务器上。

我的代码

这是我的 HTML 页面的代码：

<head>
  <title>prova insert</title>
</head>

<body>
    <p id='text'></p>
  <script>
        var xhr = new XMLHttpRequest();
        var url = "http://192.168.1.4:5000/addWord";
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var json = JSON.parse(xhr.responseText);
                console.log(json.email + ", " + json.password);
                text = document.getElementById("text");
                text.innerHTML = 'Ooooooooooooook';
            }
        };
        var data = JSON.stringify({"ita": "neve", "eng": "snow", "descr": "", "pos":"nome"});
        console.log(data);
        xhr.send(data);
  </script>
</body>

</html>

烧瓶代码：

from flask import Flask
from flask import request
import json

import db_connection

app = Flask(__name__)


@app.route('/test')
def test():
    return "Test succeeded."

@app.route('/vocaboli')
def get_vocaboli():
    voc = connection.get_all_words()

    return json.dumps(voc)

@app.route('/addWord', methods = ['POST'])
def add_word():
    data = request.get_json()

    print(data)
    print(data.get('ita'))

    ita = data.get('ita')
    eng = data.get('eng')

    descr = data.get('descr') # opzionali
    pos = data.get('pos')

    connection.add_word(ita, eng, descr, pos)

    response = dict(correct='ok')
    return json.dumps(response)


if __name__ == '__main__':
    connection = db_connection.DatabaseConnection()
    app.run()

dbconnection.py:

class DatabaseConnection():
        def __init__(self):
                self.mariadb_connection = mariadb.connect(user=user, password=password, database='vocabulary')
                print('Connection succeeded.')

        def get_cursor(self):
                return self.mariadb_connection.cursor()

        def get_all_words(self):
                cursor = self.get_cursor()

                cursor.execute("select * from vocaboli")
                return cursor.fetchall()

        def add_word(self, ita, eng, descr=None, pos=None):
                cursor = self.get_cursor()
                cursor.execute("insert into vocaboli (ita, eng, description, pos) values ('{}', '{}', '{}', '{}')".format(ita, eng, descr, pos))
                self.mariadb_connection.commit()

        def update_description(self, ita, eng, descr=None):
                cursor = self.get_cursor()
                cursor.execute("update vocaboli set description = '{}' where ita = '{}' and eng = '{}'".format(descr, ita, eng))
                self.mariadb_connection.commit()

输出

我也尝试在 http://192.168.1.4/addWord 上做 POST，但它 returns 一个 NOT FOUND。

问题
如何以正确的方式从 Javascript 代码调用 Web 服务？我必须使用 ngrok 隧道作为 URL，还是必须使用 Raspberry 的 IP？
我必须以某种方式使用 PHP 才能在服务器端工作吗？
正如我所说，我不熟悉 Javascript/PHP，答案可能很简单，但我想不出来。

Answer 1

默认情况下，Flask 服务器只能在本地访问。根据 Flask documentation，尝试在运行您的应用程序时指定 host='0.0.0.0' 以使其可从网络中的其他设备访问：

if __name__ == '__main__':
    connection = db_connection.DatabaseConnection()
    app.run(host='0.0.0.0')

然后尝试从 PC (http://192.168.1.4:5000/test) 上的浏览器显示 /test 页面。

如果这不起作用，请确保 Raspberry Pi 上的端口 5000 已打开。

编辑解决 CORS 策略错误：

尝试使用 flask_cors 模块允许 CORS:

from flask import Flask
from flask_cors import CORS

...

app = Flask(__name__)
CORS(app)

...

Answer 2

我在这里看到几件事：

如果您使用的是 Nginx，则为 http://localhost:5000 so it can act as reverse proxy and applications is available at http://192.168.1.4 with ssl it would be https://192.168.1.4
如果后端和前端运行在不同的服务器上，您需要使用 CORS，这可能在 Ngnix/Flask 级别，具体取决于您的配置方式。
您需要告诉 flask 而不是您将使用 JSON content-type 的函数，以便查看 link

这些步骤可以解决您的问题。如果它使用 Postman 工作，则与 DB 无关。

从 javascript 调用 Flask 服务器上的 Web 服务方法

Call web service method on Flask server from javascript

javascript

python

web-services

web-frontend

flask