使用 Flask API 和 Reactjs 的多个请求答案

【问题标题】：Multiple Request with Flask API and Reactjs使用 Flask API 和 Reactjs 的多个请求
【发布时间】：2021-05-25 19:12:43
【问题描述】：

以下是我提出的要求。一切正常，除非我尝试显示此错误的put /stats-batch。不知道显示的options是什么，今天才注意到。

/stats-batch 也只是在访问时打印 hello

27.0.0.1 - - [25/May/2021 16:20:46] "OPTIONS /user HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 16:20:46] "POST /user HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 16:20:48] "OPTIONS /product HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 16:20:48] "GET /product HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 16:20:48] "OPTIONS /new-batch HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 16:20:48] "GET /new-batch HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 16:21:21] "OPTIONS /new-batch HTTP/1.1" 200 -
oks
127.0.0.1 - - [25/May/2021 16:21:21] "PUT /new-batch HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 16:21:21] "GET /new-batch HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 16:21:43] "OPTIONS /stats-batch HTTP/1.1" 200 -
127.0.0.1 - - [25/May/2021 16:21:44] "PUT /stats-batch HTTP/1.1" 500 -
Traceback (most recent call last):
  File "C:\Users\USER\Desktop\Allen\santeh\env\Lib\site-packages\flask\app.py", line 2464, in __call__
    return self.wsgi_app(environ, start_response)
.......
.......
  File "C:\Users\USER\AppData\Local\Programs\Python\Python39\Lib\json\encoder.py", line 179, in default
    raise TypeError(f'Object of type {o.__class__.__name__} '
TypeError: Object of type function is not JSON serializable

我像这样使用axios 来调用这个函数。 config 有 authorization header 就像所有其他请求一样

const startBatch = async () => {
  const status = 'start'

  await axios
    .put('http://127.0.0.1:5000/stats-batch', status, config)
    .then((res) => {
      console.log(res)
    })
    .catch((err) => {
      console.log(err)
    })
}

控制台显示error 即No Access-Control-Allow-Origin header is present on the requested resource。

我还安装了flask_cors，并且其他 axios 请求正在运行。我不知道是后端还是前端导致此错误。

【问题讨论】：

标签： reactjs cors flask-restful

【解决方案1】：

我发现了一个问题； “/new-batch”端点抛出 500 个异常，可能与“Object of type function is not JSON serializable”有关。

根据描述/错误“No Access-Control-Allow-Origin header is present on the requested resource”消息，我理解的是

PUT VERB 缺少 CORS 配置。因为您写的其余端点都可以正常工作，所以只有在这个特定的“/new-batch”端点上的 PUT 会失败。

选项：在 CORS 中，使用 OPTIONS 方法发送预检请求，以便服务器可以响应是否可以发送请求。

网址：https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

【讨论】：