无法从 JavaScript 连接到 Flask REST API答案

【问题标题】：Can't connect to Flask REST API from JavaScript无法从 JavaScript 连接到 Flask REST API
【发布时间】：2020-09-02 15:39:03
【问题描述】：

我尝试使用 Flask 制作一个远程 REST API 并从 JavaScript 访问它，但它不起作用，它无法访问 API，我不知道为什么，但是当我输入 URL 时浏览器我可以看到结果。这是我的代码：

目录中的 init.py 代码：

from flask import Flask
from flask_restful import Resource, Api
app = Flask(name)

api = Api(app)
@app.route("/")

def get_list():
    return ['some', 'strings']

class SomeClass(Resource):
    def get(self):
        value = get_list()
        return {'key': value}, 200

api.add_resource(SomeClass, '/users')

来自 run.py 的代码：

from directory import app

app.run(host='0.0.0.0', port=5050, debug=True)

这是来自 JavaScript 的代码：

<script>
    function plzwork() {

        var requestOptions = {
            method: 'GET',
            redirect: 'follow',
            body: '2',
            cache: 'no-cache'
        };

        fetch("<remote_public_IP>:<port>/", requestOptions)
            .then(response => response.json())
            .then(data => console.log(data));
        //  .then(result => console.log(result))
        //  .catch(error => console.log('error', error));

    }</script>

【问题讨论】：

您是否尝试注释掉 .catch() 以打印潜在错误？
是的。没有。 ://
该问题没有显示plzwork() 函数是如何定义的，但它没有显示plzwork() 函数被调用的位置。是否有其他地方调用它的代码？如果没有，那么您可能只需要在现有代码的末尾添加一行来调用该函数：plzwork();.
所有任务

【解决方案1】：

首先，我不确定你的后端是否真的有效，但这里的代码有一些变化：

安装flask-cors模块：

pip install -U flask-cors

烧瓶 -> init.py：

from flask import Flask
from flask_restful import Resource, Api
from flask_cors import CORS # + added

app = Flask(__name__)
CORS(app) # + added

api = Api(app)
@app.route("/") # you don't need this if you use Flask_restful
def get_list():
    return ['some', 'strings']

class SomeClass(Resource):
    def get(self):
        value = get_list()
        return {'key': value}, 200

api.add_resource(SomeClass, '/users')

JavaScript -> body: '2' 被注释掉了：

<script>
    function plzwork() {

        var requestOptions = {
            method: 'GET',
            redirect: 'follow',
            // body: '2', 
            cache: 'no-cache'
        };
        fetch("http://127.0.0.1:5000/users", requestOptions)
            .then(response => response.json())
            .then(data => console.log(data));
        //  .then(result => console.log(result))
        //  .catch(error => console.log('error', error));

    }
</script>

您的 HTML（请注意我将其更改为用于测试的 href 标记）：

<li class="nav-item" onclick="plzwork()" role="presentation"><a class="nav-link" href="http://127.0.0.1:5000/users">
<i class="fa fa-tasks"></i><span>All Tasks<br></span></a></li>

结合 HTML+JS 实现简单：

<html lang="en">
    <head>
        <title></title>
    </head>
<body>
<li class="nav-item" onclick="plzwork()" role="presentation"><a class="nav-link" href="http://127.0.0.1:5000/users">
<i class="fa fa-tasks"></i><span>All Tasks<br></span></a></li>


<script>
    function plzwork() {

        var requestOptions = {
            method: 'GET',
            redirect: 'follow',
            cache: 'no-cache'
        };
        fetch("http://127.0.0.1:5000/users", requestOptions)
            .then(response => response.json())
            .then(data => console.log(data));
        //  .then(result => console.log(result))
        //  .catch(error => console.log('error', error));

    }
</script>

    </body>
</html>

【讨论】：

【解决方案2】：

您能检查一下您的浏览器 console.error 吗？我猜问题是 CORS，请从您的烧瓶应用程序中启用 CORS。你可以得到它更多here

【讨论】：

当我在浏览器中搜索“:/”时，它会显示我的 javascript 代码必须接收的数据......但在程序中我没有收到任何东西
您可以关注上面的链接吗？我想它应该可以工作