没有收到来自 Flask 后端的 React-Native 前端
Posted
技术标签:
【中文标题】没有收到来自 Flask 后端的 React-Native 前端【英文标题】：Not receiving on React-Native frontend from Flask backend 【发布时间】：2022-01-22 11:56:23 【问题描述】：我是 React Native 的新手，正在尝试构建一个应用程序。我对如何准确地“连接”后端和前端感到困惑。正如大多数教程所述，我在 package.json 添加了一个代理：
"name": "frontend",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"proxy": "http://127.0.0.1:5000",
"scripts":
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
,
"dependencies":
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "^17.0.1",
"react-native": "0.64.3",
"react-native-web": "^0.17.1"
,
"devDependencies":
"@babel/core": "^7.12.9"
,
"private": true
我也有这两个功能：
import React, useEffect, useState from 'react';
import test from './components/Home';
function App()
test();
return (
<div> </div>
)
export default App;
import React, useEffect, useState from 'react';
function test()
useEffect(() =>
fetch("/")
.then(response => response.json()
.then(data =>
console.log(data)
)
), []);
export default test;
现在，我只是尝试在控制台中打印出数据，以查看数据是否真的被正确接收（不是），因为我在控制台中收到 Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data 错误。
但是，我试图打印出来的数据来自我的后端，目前看起来像这样：
from flask import Flask
app = Flask(__name__)
# API Routes
@app.route("/", methods=["GET"])
def home():
return "TEST": ["1", "2", "3"]
if __name__ == "__main__":
app.run(debug=True)
回到我在 JS 文件中的测试函数，如果我将 response.json() 更改为 response.text()，错误就会消失，但控制台会记录以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<!--
This viewport works for phones with notches.
It's optimized for gestures by disabling global zoom.
-->
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
/>
<title>portfolio</title>
<style>
/**
* Extend the react-native-web reset:
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
*/
html,
body,
#root
width: 100%;
/* To smooth any scrolling behavior */
... and much more HTML
看来我没有从后端接收数据。我有什么明显的遗漏吗？谢谢
【问题讨论】：
【参考方案1】：您必须配置Cross-origin 以允许flask 接收react 的请求。
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
# enable CORS
CORS(app, resources=r'/*': 'origins': '*')
# API Routes
@app.route("/", methods=["GET"])
def home():
return "TEST": ["1", "2", "3"]
if __name__ == "__main__":
app.run(debug=True)
有关该主题的更多详细信息：flask-cors
【讨论】：
这似乎没有任何作用。 其实！它确实奏效了。我必须启用 CORS 并在前端获取整个 URL。谢谢 @erragon29 如果我的回答帮助您考虑将其作为答案进行验证并为其添加一点投票，那就太好了。以上是关于没有收到来自 Flask 后端的 React-Native 前端的主要内容，如果未能解决你的问题，请参考以下文章
前端与后端的数据交互（jquery ajax+python flask）
recvfrom 没有收到来自客户端的任何内容，但客户端正在发送信息
在ios应用程序中实现xmpp聊天时，它没有收到来自另一端的消息而消息发送成功？