时间戳

首页 > 解决方案 > 向烧瓶端点发送表单数据 POST 请求，该请求将被重定向到其他更专用的端点

reactjs - 向烧瓶端点发送表单数据 POST 请求，该请求将被重定向到其他更专用的端点

问题描述

我正在尝试创建一个更通用的端点来处理上传文件。此端点将检查文件并根据文件的类型重定向到特定端点（专用于特定文件类型的上传）。为了测试这个想法，在客户端（reactJS）我启用 redirect: 'follow'了 fetch 和烧瓶端，我添加了 HTTP 代码307来保留请求。我使用浏览器访问路径（使用 GET），重定向有效。但是在使用 react 应用程序时，获取似乎不遵循重定向，因为应用程序从提供的端点接收 307，但没有从重定向接收 200 代码。

服务器日志：

# Using Browser
127.0.0.1 - - [06/Apr/2021 16:28:08] "GET /upload/shp HTTP/1.1" 307 -
Redirect request received!
127.0.0.1 - - [06/Apr/2021 16:28:08] "GET /upload/redirect HTTP/1.1" 200 -

# Using React App
127.0.0.1 - - [06/Apr/2021 16:33:22] "POST /upload/shp HTTP/1.1" 307 -

客户端 - ReactJS：

  uploadAPI = async (formData) => {
    fetch(API_SERVER_URL + this.state.destpath, {
      method: "post",
      redirect: 'follow',
      body: formData,
      config: { headers: { "Content-Type": "multipart/form-data" } },
    }).then((res) => {
      if (res.ok) {
        alert("File uploaded successfully.");
      }
    });
  };

服务器端 - 烧瓶：

@app.route('/upload/redirect', methods = ['POST', 'GET'])
def index():
    print("Redirect request received!")
    return "redirect", 200, {'Content-Type': 'application/json'}


@app.route('/upload/shp', methods = ['POST', 'GET'])
def file_recv_shp_node():
    """ API endpoint that receives a zip with shp,sbf,shx files
        This endpoint receives a file via FormData only by a `POST` request
            Args:
                no value
            Returns:
                Returns json object with the number of created/updated data
    """
    return redirect(url_for('index'),code=307)

更新 1 我发现reactJS 方面的请求失败了。我添加了以下代码以查看发生了什么：

.then((res) => {
      console.log("request", res)
      if (res.ok) {
        alert("File uploaded successfully.");
      }

控制台 JS 日志：

> Import.js:168 POST http://0.0.0.0:5001/upload/shp net::ERR_CONNECTION_RESET
> localhost/:1 Uncaught (in promise) TypeError: Failed to fetch

更新 2

  uploadNeo4jAPI = async (formData) => {
    fetch(API_SERVER_URL + this.state.destpath, {
      method: "post",
      redirect: 'follow',
      body: formData,
      mode: 'cors',
      redirect: 'follow',
      keepalive: true,
      config: { headers: { "Content-Type": "multipart/form-data" } },
    }).then((res) => {
      console.log("request", res)
      if (res.ok) {
        alert("File uploaded successfully.");
      }
    });
  };


@app.route('/upload/redirect',methods = ['POST', 'GET'])
@cross_origin()
def index():
    print("Redirect request received!")
    return "redirect", 200, {'Content-Type': 'application/json'}




@app.route('/upload/shp', methods = ['POST', 'GET'])
@cross_origin()
def file_recv_shp_node():
    """ API endpoint that receives a zip with shp,sbf,shx files
        This endpoint receives a file via FormData only by a `POST` request
            Args:
                no value
            Returns:
                Returns json object with the number of created/updated data
    """
    return redirect(url_for('index'),code=307)

我试图允许CORS显式，但它也不起作用。

标签： reactjsflaskrequesthttp-postform-data

解决方案

[解决方案]

在这种情况下，一个可行的解决方案是直接在主端点上调用该函数，而不是使用重定向到相关端点。请求和表单数据也可以访问，而无需作为函数参数传递。

推荐阅读