POST request to Azure Functions App to be send twice before success in React (Axios, Fetch)

Question

I have a simple upload form which onsbubmit should post data to API. In my previous question I struggled to get it running in general, but now CORS went into play. After spending hours on configuring CORS back an forth on Azure Function I got stuck. Finally I managed to verify the server with Curl (Allow Access Origin is matching). This made me thinking there is a bug/feature in how axios handles the requests. So I used fetch just before axios. When deployed one POST fire was successful. I thought I found the problem - so I commented out the axios part. Deployed again. Nothing. So I am back with the working solution but really dirty - one of the methods is firing Error. The other is working. I think the working one is the second one. Any ideas what is happening here?

Here is my code snippet:

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
     });

  }
}

and this is the function.json content on Azure:

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

I have enabled the methods in the platform features of Azure Function. Should this automatically propagate to function.json? Or should I add this manually?

Can you edit the question to add your azure function code and information about your configuration like what is in your `function.json` file? It's likely something in the mating between Axios and Azure Functions - I've had some issues in the past, but have been able to successfully get it to work. — technogeek1995, Dec 18 '19 at 14:32
{ "bindings": [ { "authLevel": "function", "type": "httpTrigger", "direction": "in", "name": "req" }, { "type": "http", "direction": "out", "name": "res" } ] } — MatnikR, Dec 18 '19 at 14:40
You should configure your Azure Function's CORS to `*` until you get this completely figured out. Here's [how to do that](https://learn.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors). — technogeek1995, Dec 18 '19 at 14:53
I didn't have to set any headers either, so I would recommend removing the headers field. Make sure your using `https` in the URL. Azure Functions App's bulk at `http` and respond as `GET` requests. — technogeek1995, Dec 18 '19 at 15:00
In your `url: 'https://example.com'`, you need to include the API key using a URL parameter (eg: `https://example.com?code=`. You can read more about generating and including the key in the URL [here](https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-http-webhook?tabs=csharp#authorization-keys). — technogeek1995, Dec 18 '19 at 15:10
Ofcourse I have it. "example.com" is just a replacement for security reasons. The function is well tested with postman and it works. Plus as I wrote above one of the methods work - so it is jus the CORS issue. — MatnikR, Dec 20 '19 at 10:38

technogeek1995 · Answer 1 · 2019-12-18T15:05:18.413

0

Axios sends an OPTIONS request prior to sending the POST. It's likely that the Azure Function is denying the OPTIONS request, which prevents the POST request from being successful. Read more about the OPTIONS verb here and here. However, it looks like your function.json is missing a methods key that should have a value of [ "options", "get", "post" ]. This will explicitly allow both OPTIONS and POST (as well as GET).

Your Azure Function's function.json should be something like this:

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

edited Dec 18 '19 at 15:05

answered Dec 18 '19 at 14:48

technogeek1995

3,185
2
31
52

I just edited my question to address the "allowed methods" issue. Do you suggest I ignore the "platform features" blade and just edit the function.json? – MatnikR Dec 20 '19 at 10:44
Do you deploy through VS Code or directly in the cloud editor on the Azure Portal? – technogeek1995 Dec 20 '19 at 14:42
I worked directly in the portal copying and pasting for reference and local save into VS Code. – MatnikR Dec 22 '19 at 18:49

score 0 · Answer 2 · answered Dec 20 '19 at 12:43

For all those who struggle with similar issue the workaround is relatively simple. Stick to content-type application/x-www-form-urlencoded and avoid custom headers, this way it will not force preflight with OPTIONS. There seems to be a bug either in Axios package and/or Azure Functions on handling posting/responding to OPTIONS call. Check out: https://medium.com/@praveen.beatle/avoiding-pre-flight-options-calls-on-cors-requests-baba9692c21a

for some other related hints.

In firefox I noticed that Option call from Localhost has Origin: null. This maybe AXIOS bug and Azure Function does not accept this call as proper Options call. But I stopped further investigation on his.

POST request to Azure Functions App to be send twice before success in React (Axios, Fetch)

2 Answers2