未從 Flask 后端接收 React-Native 前端

Question

我是 React Native 的新手，正在嘗試構建一個應用程序。 我對如何准確地“連接”后端和前端感到困惑。 作為大多數教程 state，我在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 文件中的測試 function ，如果我將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 前端

問題描述

1 個解決方案

解決方案1
0 2021-12-21 13:18:33

未從 Flask 后端接收 React-Native 前端

問題描述

1 個解決方案

解決方案1 0 2021-12-21 13:18:33

解決方案1
0 2021-12-21 13:18:33