Reactjs 在React（Axios，Fetch）中成功之前，向Azure Functions应用程序发送两次POST请求

我有一个简单的上传表单，onsbubmit应该将数据发布到API。在我之前的问题中，我努力让它在总体上运行，但现在CORS开始发挥作用。花了几个小时在Azure上来回配置CORS功能后，我被卡住了。最后，我设法用Curl验证服务器（允许访问源匹配）。这让我觉得axios处理请求的方式存在缺陷/功能。所以我在axios之前用了fetch。部署时，一次事后射击成功。我认为我发现了问题所在，所以我对axios部分进行了注释。再次部署。没有什么。因此，我回到了工作解决方案，但真的很脏-其中一种方法是触发错误。另一个正在工作。我认为工作的是第二个。你知道这里发生了什么吗

以下是我的代码片段：

formHandler() {
    const { formFields } = this.state;
    console.log(formFields);
    const response = fetch('https://example.com', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formFields),
    })
    axios({
      url: 'https://example.com',
      method: 'post',
      headers: { 'Content-Type': 'application/json'},
      data: formFields

      }).then(function(response){
       console.log(response);

       //Perform action based on response
   })
     .catch(function(error){
      alert(error);
       console.log(error.status);
       //Perform action based on error
     });

  }
}

这是Azure上的function.json内容：

{ "bindings": [ { "authLevel": "function", "type": "httpTrigger", "direction": "in", "name": "req" }, { "type": "http", "direction": "out", "name": "res" } ] }

---

我已启用Azure功能的平台功能中的方法。这是否应该自动传播到function.json？还是手动添加？

Axios在发送

POST

之前发送

OPTIONS

请求。Azure函数很可能拒绝了

选项

请求，这会阻止

POST

请求成功。阅读有关

选项的更多信息

动词和。但是，您的function.json似乎缺少一个

methods

键，该键的值应为

[“options”，“get”，“post”]

。这将显式地允许

选项

和

POST

（以及

GET

）

Azure函数的

Function.json

应该是这样的：

{
  "bindings": [
    {
      "authLevel": "function",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "options",
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

---

Axios在发送

POST

之前发送

OPTIONS

请求。Azure函数很可能拒绝了

选项

请求，这会阻止

POST

请求成功。阅读有关

选项的更多信息

动词和。但是，您的function.json似乎缺少一个

methods

键，该键的值应为

[“options”，“get”，“post”]

。这将显式地允许

选项

和

POST

（以及

GET

）

Azure函数的

Function.json

应该是这样的：

{
  "bindings": [
    {
      "authLevel": "function",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "options",
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

---

对于所有与类似问题斗争的人来说，解决方法相对简单。坚持使用内容类型application/x-www-form-urlencoded并避免自定义标题，这样就不会强制飞行前使用选项。 Axios软件包和/或Azure函数在处理发布/响应选项调用方面似乎存在缺陷。退房：

获取一些其他相关提示

---

在firefox中，我注意到来自Localhost的选项调用具有Origin:null。这可能是AXIOS bug和Azure函数不接受此调用作为正确的选项调用。但我停止了对他的进一步调查。

对于所有与类似问题斗争的人来说，解决方法相对简单。坚持使用内容类型application/x-www-form-urlencoded并避免自定义标题，这样就不会强制飞行前使用选项。 Axios软件包和/或Azure函数在处理发布/响应选项调用方面似乎存在缺陷。退房：

获取一些其他相关提示

---

在firefox中，我注意到来自Localhost的选项调用具有Origin:null。这可能是AXIOS bug和Azure函数不接受此调用作为正确的选项调用。但是我停止了对他的进一步调查。

你能编辑这个问题来添加你的azure函数代码和关于你的配置的信息，比如

function.json

文件中的内容吗？这很可能是Axios和Azure函数之间的配合问题-我过去遇到过一些问题，但能够成功地让它工作。这是来自Azure函数的函数JSON:{“bindings”：[{“authLevel”：“function”，“type”：“httpTrigger”，“direction”：“in”，“name”：“req”}，{“type”：“http”，“direction”：“out”，“name”：“res”}]}您应该将Azure函数的CORS配置为

*

，直到完全解决此问题。这里是。我也不必设置任何标题，因此我建议删除标题字段。确保您在URL中使用

https

。Azure函数应用程序的批量位于

http

，并以

get

请求的形式响应。C您是否编辑问题以添加azure函数代码和有关配置的信息，如

function.json

文件中的内容？这可能是Axios和azure函数之间的配合问题-我过去遇到过一些问题，但已成功使其工作。这是azure Func的函数json选项：{“绑定”：[{“authLevel”：“函数”、“类型”：“httpTrigger”、“方向”：“in”、“名称”：“req”}，{“类型”：“http”、“方向”：“out”、“名称”：“res”}]}您应该将Azure函数的CORS配置为

*

，直到您完全解决此问题。这里是。我也不必设置任何标题，因此我建议删除标题字段。确保您在URL中使用

https

。Azure函数应用程序的批量位于

http

，并作为

get

请求进行响应。I刚刚编辑了我的问题以解决“允许的方法”问题。你建议我忽略“平台功能”吗blade并编辑function.json？您是通过VS代码部署还是直接在Azure门户上的云编辑器中部署？我直接在门户中进行复制和粘贴以供参考，并将本地保存到VS代码中。我只是编辑了我的问题以解决“允许的方法”问题。您建议我忽略“平台功能”吗只需编辑function.json？您是通过VS代码部署还是直接在服务器上的云编辑器中部署