繁体   English   中英

尝试使用React Native向Flask后端发出Axios HTTP请求

Trying to make Axios HTTP request with React Native to Flask backend

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试通过Axios发出一个HTTP请求,该响应是后端烧瓶应用程序登录端点的本机响应,但是当我运行Expo时,键入用户名并单击“登录”,我的在线状态仍然为“离线”。 有人可以帮我这个忙吗?

这是我的烧瓶代码:

from flask import Flask, request, abort, jsonify

app = Flask(__name__)

users = []

@app.route("/login", methods=["POST"])
def login():
username = request.json.get('username', None)
if username is None or username in users:
    abort(401)
else:
    users.append(username)
    return jsonify({
    'status': 'OK',
    'message': 'Successfully Logged in'
    })


if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')
#app.run(debug=True)
#app.run(debug=True, host='http://127.0.0.1:5000') 
#app.run(debug=True, host='http://146.203.130.213:5000')

这是我的本机代码:

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, FlatList } from 
'react-native';
import axios from 'axios';

const serverUrl = '{my IP address}:5000';
//const serverUrl = 'http://127.0.0.1:5000';
const http = axios.create({
baseURL: serverUrl,
}); 

export default class App extends React.Component {
constructor(props) {
 super(props);
  this.state = {
   input: '',
   messages: [],
  };
}

onLogin() {
 const { isLoggedIn, username } = this.state;
  if (!isLoggedIn) {
   http.post('/login', {username})
    .then(() => this.setState({isLoggedIn: true}))
    .catch((err) => console.log(err))
  }  
 }

render() {
 const { messages, isLoggedIn } = this.state;
  return (
  <View style={styles.container}>
   <View>
   <Text>Login</Text>
   <TextInput
   onChangeText={(val) => this.setState({username: val})}
   />
  <Button title='Login' onPress={() => this.onLogin()} />
  <Text> Online Status: {isLoggedIn ? 'Online' : 'OffLine'}</Text>
 </View>
</View>
);
}
}

const styles = StyleSheet.create({
  container: {
  flex: 1,
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'center',
  },
});

任何帮助将不胜感激。

问题暂未有回复.您可以查看右边的相关问题.
1 React-native 使用 axios 发出 Api GET 请求

我正在尝试使用 youTube API 密钥和 axios lib 发出 API GET 请求,出于某种原因,当我尝试搜索一个术语时,我收到“请求失败,代码 400”。 目前该术语是硬编码的。 当用户按下提交时将执行的函数: ...

2 如何使用 React 前端和 Flask 后端处理 HTTP 请求

我正在使用 Flask 框架为后端和前端构建一个 Web 应用程序。 我想使用http请求连接这两个,但我不知道从哪里开始。 我在前端和后端都使用PyCharm IDE 。 我查看了react-http-request库,但我不明白。 我希望能够将字符串从前端发送到后端,并将json文件从后端发 ...

5 如何使用Axios使用React发出循环请求?

如何循环Axios请求以填充对象数组? 我正在尝试创建一个使用称为“ swapi”的《星球大战》 API的Web界面。 可以通过以下链接进行访问: https://swapi.co/ : https://swapi.co/ 我可以搜索人,星际飞船,行星,物种和电影。 因此,例如, ...

6 如何使用 axios 在 React 中发出请求

我大约在 3 或 4 个月前开始学习 React。 最初学习了 Codecademy 的课程,此后又学习了很多其他课程和教程,其中主要使用 Axios 进行 get 请求,而没有真正解释 Axios。 我决定回到 Codecademy 的“Ravenous”yelp 克隆项目,它的说明是针对类组件的 ...

7 使用 axios、flask 和 react 的 400 个错误请求

我无法通过 react js 向 python-flask 服务器发出发布请求。 我正在使用 axios。 此请求适用于邮递员,但我似乎无法弄清楚为什么我可以从我的 React 应用程序发出发布请求。 请看烧瓶代码: 我的 react-redux 操作代码: 我的反应类组件: 请参阅以 ...

8 在 React-native 上使用 Axios 发出错误网络

我在 Axios POST 方法上有这个问题“网络错误”。我的 api 没有问题,我在一个新项目上尝试了这段代码,它工作正常,我也尝试在我当前项目的随机 api 上使用相同的代码发布它也有效。 我的最后一个想法是问题来自我的项目中的依赖项。 因此,如果您对此有所了解.. 非常感谢您的回答。 这是我 ...

9 您可以使用axios在后端发出发布请求吗?

目前,我有一个React前端和一个node.js后端。 当用户单击一个按钮时,这将触发我的前端到后端的GET请求(使用axios),该请求当前正在本地主机上运行。 在后端定义的端点上,收到此请求后,我希望向第三方认证服务器发起另一个请求以检索访问令牌。 我该怎么做? 我正在尝试使用axios向第三 ...

10 向Axios发出请求| React,Redux

我想向Axios发出看跌请求,到目前为止,我已经将此问题纳入了行动范围: 当我console.log item我可以看到我在该对象内的输入框中键入的所有内容,但是后来我得到404。我知道我拥有该URI。 有人知道如何解决此问题吗? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM