簡體   English   中英

如何從本機應用程序聯系 flask-restful api?

[英]How to contact flask-restful api from react native app?

我是后端開發的新手。 我嘗試開發一個 flask restful api。我按照文檔做了建議的最小值 api,這只是返回一個 jsonified dict。 使用 postman、curl 和瀏覽器,沒問題,api 正在運行並響應我的請求。

然而,從我的本機反應應用程序中,我總是得到一個 Netwrok 錯誤。

我嘗試了很多東西:
- flask 服務器的多個 IP 地址
- 不同的使用方式 axios
- 不同的操作系統:win10,ubuntu
- 不同的端點:/、/api、/test
- 編寫 api 的不同方式(flask-restful class、flask 應用程序功能...)
- 來自 web 文檔的操作:我的設備的開發模式,chrome 開發工具(端口轉發)
- 我請一位 React Native 開發人員檢查我的客戶端代碼,他說沒有錯,

精度:
- python 代碼在 conda 虛擬環境下運行
- appli 在 node.js 和 expo 下運行
- 我的應用程序的容器文件夾和我的 api 處於同一級別
- flask 服務器不響應 404 或其他什么,它根本不響應,react native 中返回的錯誤是 a.network error
- 根據 url,.network 錯誤立即或延遲 2 分鍾后出現
- flask 在被 postman、curl、chrome 調用時顯示請求和狀態,但當我從 React Native 應用程序按下我的按鈕時沒有反應

這是我的 python 代碼(之一):

from flask import (Flask, jsonify)
# from flask_restful import Resource, Api
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route("/api", methods=["GET"])
def get():
    return jsonify(hello='bouh !')

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=True)

這是客戶端代碼:

import React, {Component} from 'react';
import { View, Button } from 'react-native';
import axios from 'axios'; 

import { sharedStyles } from '../../SHARED/_shared';

var url = "http://192.168.1.16:5000/api";

export default class PrevCommune extends Component {
    constructor(props){
        super(props);
        this.navigation=this.props.navigation;
    };

    getAxios=()=>{
        axios.get(`${url}`).then((response)=>{
            console.log("succes axios :",response);
        }).catch((error)=>{
            console.log("fail axios :", error);
        });
    };

    getFetch=()=>{
        fetch(url).then((response)=>{
            console.log("succes fetch :",response)
        }).catch((error)=>{
            console.log("fail fetch :",error)
        })
    }

    render(){
        return (
            <View style={sharedStyles.mainContainer}>
                <Button onPress={()=>this.getAxios()} title={"get axios"}></Button>

                <Button onPress={()=>this.getFetch()} title={"get fetch"}></Button>
            </View>
        );
    };
};

請求返回的行:

fail axios : [Error: Network Error]
fail fetch : [TypeError: Network request failed]

我在 flask api 上看到了很多教程、視頻和文章,但我沒有發現我哪里錯了。 如果您有任何想法,請告訴我,我認為客戶端和服務器代碼都可以。 問題似乎是我的請求被某些東西阻止了。

已解決:問題是我的防火牆...感謝 ricardo 的 CORS 文檔 =)

對我有用的是在 react native 的 api 調用中將本地主機的 IP 地址更改為 my.network IP,然后使用以下命令啟動 flask 應用程序。

flask run --host=0.0.0.0

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM