Google Dialogflow with API2 webhook: Failed to Parse response - http

Question

I am trying to connect my bot to an azure function with a db. I entered the azure function URL as the webhook, it recieves the request as a POST http message.
I tried to respond with the following test message (and many more simpler ones):
{
"fulfillmentText":"fulfillmentText",
"fulfillmentMessages": [{"simpleResponse":{"textToSpeech":"text","ssml":"ssml","displayText":"text"}}]
}
and got a response:
Webhook call failed. Error: Failed to parse webhook JSON response:
Expect message object but got:
"笀∀昀甀氀昀椀氀氀洀攀渀琀吀攀砀琀∀㨀∀昀甀氀昀椀氀氀洀攀渀琀吀攀砀琀∀Ⰰ∀昀甀氀昀椀氀氀洀攀渀琀䴀攀猀猀愀最攀猀∀㨀嬀笀∀猀椀洀瀀氀攀刀攀猀瀀漀渀猀攀∀㨀笀∀琀攀砀琀吀漀匀瀀攀攀挀栀∀㨀∀琀攀砀琀∀Ⰰ∀猀猀洀氀∀㨀∀猀猀洀氀∀Ⰰ∀搀椀猀瀀氀愀礀吀攀砀琀∀㨀∀琀攀砀琀∀紀紀崀紀".
Everytime I enter a query in dialogflow I can check the diagnostic info and I see the response clearly in the "Fufillment Response" tab but then there's the above error in the "Response Status" tab.
Help would me much appreciated.

Answer 1

It looks like the content type of the HTTP response may be unclear. Make sure the HTTP response sets the content-type header explicitly to "application/json" or possibly event "application/json; charset=utf-8".

Answer 2

The problem has something to do with the Azure functions URL. For me a workaround was to write the function in visual studio, deploy to localhost, and use ngrok as a tunnel for dialogflow to call the webhook, rather than using the Azure Functions URL.