没有从 Flask 后端接收到 React-Native 前端

Question

我是 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

看来我没有从后端接收数据。有什么明显的我想念的吗？谢谢

Answer 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

没有从 Flask 后端接收到 React-Native 前端

Not receiving on React-Native frontend from Flask backend

javascript

python

flask

react-native