HTTP request using webflow logic. Can't parse the JSON header on a POST request

Design help Logic
1

I have written a custom API that needs to accept data from webflow follow a user action. The data according to webflow is formatted as (Form field/DRA1: str).

The POST is occuring but the API’s JSON parser returns a HTTP 422 error (Unprocessable Entity). Webflows test interface says it was successful but has a returned JSON payload of:

{
“detail”: [
{
“type”: “json_invalid”,
“loc”: [
“body”,
0
],
“msg”: “JSON decode error”,
“input”: {},
“ctx”: {
“error”: “Expecting value”
}
}
]
}

No matter how I format or process the incoming fields, it returns the same error. Testing the API with CURL it is working perfectly. Any ideas what is different about Webflows version of a POST payload?

2

This is the API code:

from fastapi import FastAPI, HTTPException
from fastapi.responses import JSONResponse
import json # Import the json module

Create a FastAPI instance

app = FastAPI()

Define a route for the POST request

@app.post(“/post_record/”)
async def post_record(data: dict):
try:
# Attempt to parse the incoming JSON data
parsed_data = json.loads(data)
print(parsed_data)
return JSONResponse(content=parsed_data, status_code=200)
except json.JSONDecodeError as e:
# Log the raw data when a JSON decode error occurs
print(“Raw Data:”, data)
raise HTTPException(status_code=400, detail=str(e))

3

Updating this, it appears that Webflow is not actually sending the body data in the request call.

4

Why are you trying to use Logic in this scenario?

You would likely find it far easier to POST your form or JS fetch() against your API directly. Much less complexity, no form-submission limits, and you can process the API’s response in your UX.

5

Good, point I didn’t know about that option for the submit button. I’ve managed to get it talking for a GET request and will work on the data flows and response now.

I did find an interesting bug though, although GET/POST are the two method options presented, regardless of which is selected, webflow will always send a GET.

image
image539×1068 109 KB

But the API’s logging shows its always a GET (in this example I used POST/GET/POST settings:

image
image1727×149 77 KB

6

Move your redirect URL to the Action, if you want the form data posted to you.
Also, the redirect is purely UX layer, it will always be a GET.

7

You’ve got the wiring a bit off.

You’ll want to add your API endpoint to the forms “Action” field (not the “Redirect URL” field).

This screencast walks through setting up exactly this but with Make (Integromat) being the API endpoint:

Swap out Make (Integromat) for your API endpoint instead.

This also walks you through how to handle the response in Webflow, which looks helpful in your case.

8

Final update on this. Firstly, the POST/GET option being stuck on GET was due to the URL being in the redirect box not the Action box. Updating this allowed the use of POST or GET and it works well.

That said the API itself was still raising 422 errors and the returned JSON stated there was no payload.

Webhook.site allowed the inspection of the payloads from webflow which shows the data and formatting. The error turned out to be in the API’s use of the libraries FastAPI and Pydantic. It appears that Pydantic is enforcing some form of data structure on incoming data when it is init8ially parsed and dumping anything that does not comply. I am not sure why it would do this as it seems against the design methodology of JSON.

Switching the libraries to Flask solved the problem immediately and data is now being received fine.

Frustrating problem but at least it is solved, thank you for your support!

9

FWIW that looks like a feature of the library. Make (Integromat) does the same thing if you ask it too.

It’s a handy way to drop requests without authentication on public APIs. If you keep that turned on you have the ability to save yourself from most (if not all) potential spam. Even more so since this originates from a form submission.

Good luck!