Question

我有一个React应用，可以向Flask后端发出POST请求。 POST请求旨在更改数据库中的某些数据并发送回计算值。除了响应之外，一切似乎都在Flask方面起作用。我从Flask收到的回复是：

Response { type: "cors", 
url: "http://127.0.0.1:3122/update", 
redirected: false, 
status: 200, ok: true, statusText: "OK", headers: Headers, bodyUsed: false }

我不确定自己在做什么错。在我的Flask代码中，我使用了@app.after_request

装饰的函数

response.headers.add('Access-Control-Allow-Origin', '*')
response.headers.add('Access-Control-Allow-Headers', 'Content-Type,text/plain')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')

以及flask_cors软件包，以允许从客户端进行CORS。

app = Flask(__name__)
app.config['DEBUG'] = True
api = CORS(app, resources={r"/*": {"origins": "*"}})

我还尝试将来自Flask的响应中的mimetype设置为text/plain，这样就不会调用飞行前请求。

resp = Response(response=calculation_json,
                status=200,
                mimetype='text/plain')

POST请求代码为：

(async () => {
    const rawResponse = await
        fetch(url, {
                        method: 'POST',
                        headers: {
                              'Accept': 'text/plain',
                              'Content-Type': 'text/plain'
                            },
                        body: jsonData
      });

      const response = await rawResponse;

        if (response.status >= 200 && response.status < 300) {
            console.log(response);
            return Promise.resolve(response)
        } else {
            this.props.form.resetFields();
            return Promise.reject(new Error(response.statusText))
        }

Answer 1

如果您在应用程序的客户端使用了create-react-app,，则可以在package.json文件中添加代理配置。

"proxy": {
    "/apiRoute": {
      "target": "http://127.0.0.1:3122"
    },
  },

/ apiRoute是您在Flask中定义的路由的名称（GET，POST，PUT ..）。因此，我建议在Flask中为/ api / **之类的所有路由创建一个模式，因此在package.json中而不是添加所有路由，您可以在下面添加类似内容

"proxy": {
  "/api/*": {
     "target": "http://127.0.0.1:3122"
   },
 },

Answer 2

您将必须更改响应代码，使其返回的数据不仅限于常规的http200。在这种情况下，您看起来像想要让Json返回。

请参阅示例： Return JSON response from Flask view

向Flask发出POST请求并获取数据

2 个答案: