Flask + React GET请求失败，但POST请求成功

码码

我是React的初学者。我开发了Flask后端，现在我想将其与React搭配使用。

我fetch在React中使用GET请求。当我读取数据时，调用时的文本或响应response.text()就是我应用程序目录中的index.html文件public

这是我的反应代码：

componentDidMount() {
    fetch('/')
      .then(response => {
        console.log(response.text()) //Here is the text() i said before
        this.setState({ snippets: response.data })
      })
      .catch(error=>{
        console.log(error)
      })
  }

这是我的烧瓶应用程序的MRE：

@app.route('/')
def index():
    return {'snippets':['blah','blaha']

我的代理 package.json

    "proxy": "http://127.0.0.1:5000/"

我的烧瓶后端在端口5000上运行，并在端口3000上作出反应

需要注意的一件事是POST请求（来自<form>）确实被代理到后端服务器，并且我可以在flask中检索POST请求的内容。它使用的GET请求fetch不起作用。

目录结构：

-env
-getcode
  -templates
  -static
  -__init__.py
  -routes.py
-getcode-client
  -src
  -public
run.py

这getcode是flask应用程序的目录，其中getcode-client包含使用创建的React应用程序create-react-app

注意：我也尝试设置手动代理，如下所示：https : //create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

但现在没有显示react应用。它完全显示了我的烧瓶后端的json输出。

Package.json：

{
    "name": "getcode-client",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "axios": "^0.19.2",
        "http-proxy-middleware": "^1.0.3",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-router-dom": "^5.1.2",
        "react-scripts": "3.4.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

许志恩

最新更新：对不起，我对nodejs中的代理有误解，并且fetch()可以支持这种代理。

经过反复试验后，您只需将路径“ /”更改为“ / something_else”，代理即可正常工作。

@app.route('/test', methods=['GET', 'POST'])
def index():
    return {'snippets':['blah','blaha']}

componentDidMount() {
    fetch('/test')
      .then(response => {
        console.log(response.text()) //Here is the text() i said before
        this.setState({ snippets: response.data })
      })
      .catch(error=>{
        console.log(error)
      })
  }

错误信息：

这不是关于python和flask的问题。

~~您fetch()在javascript中使用，这是本机js函数，因此它与您在中设置的代理无关package.json。~~

如果您想使用fetch()其他端口，则必须提供完整的网址，http://localhost:5000/否则您将获得react app的相同端口。

fetch('http://localhost:5000/')
      .then(response => {
        console.log(response.text()) //Here is the text() i said before
        this.setState({ snippets: response.data })
      })
      .catch(error => {
        console.log(error)
      });

您可以使用某些软件包，例如fetch-with-proxy或node-https-proxy-agent，fetch-with-proxy可以获取HTTP_PROXY env var来设置代理，并且您可以使用其他创建代理。

但是我建议使用其他软件包发送请求，例如axios。

import axios from 'axios';
const axios_ = axios.create({
  baseURL: 'http://localhost:5000',
  headers: { 'Content-Type': 'application/json' },
})

class App extends React.Component  {
  componentDidMount() {
    axios_.get('/')
      .then(response => {
        console.log(response.text()) //Here is the text() i said before
        this.setState({ snippets: response.data })
      })
      .catch(error => {
        console.log(error)
      });
  }
...}

实际上，您所指的代理不是我们通常谈论的代理，您要做的只是指向另一个端口以获取响应。

代理是关于客户端到服务器之间的隧道或其他东西。

此外，您还可以搜索反向代理，这也是您也想知道的问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。