Why does Switching from JQuery AJAX to Fetch cause a 422 Error?

Question

I'm trying to convert a small FastAPI web app from JQuery AJAX to Fetch API.

The AJAX call sends some JSON to the server which is run through a function on the backend. The original JQuery code looks like this:

    static run_task_one(E1, E2, E3, n1, n2, success, error) {
        $.ajax({
            url: "/run/task/one",
            type: "POST",
            data: JSON.stringify({
                E1: E1,
                E2: E2,
                E3: E3,
                n1: n1,
                n2: n2,
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: success,
            error: error,
        });
    }

This works fine.

My current implementation using FetchAPI is the following:

    static run_task_one(E1, E2, E3, n1, n2, success, error) {
        fetch("/run/task/one", {
            method: "POST",
            body: JSON.stringify({
                E1: E1,
                E2: E2,
                E3: E3,
                n1: n1,
                n2: n2,
            }),
            headers: {
              contentType: "application/json; charset=utf-8",
            },
        })
        .then((response) => response.json())

    }

This returns a 422 error code, along with the message: "value is not a valid dict" in the response. I've checked the response payload for each of the requests and both have the same value:

{"E1":"0.92","E2":"1.1","E3":"1.43","n1":"0.0025","n2":"0.0005"}

I understand FastAPI uses Pydantic, is it related to this package? Is the input provided by Fetch's body parameter different from JQuery's data parameter?

If you look in your browser's development tools and go to the Network tab, you should be able to see the exact difference between the two requests. — MatsLindh, Oct 05 '22 at 12:52
@MatsLindh I've added some extra information to the question, it seems the payload in both cases is exactly the same, is there anything else I should check? — Connor, Oct 05 '22 at 12:59
Verify that the sent content-types are actually identical. Copy each request to a separate document and lay the documents over each other (switch back and forth) and you should be able to spot the difference. — MatsLindh, Oct 05 '22 at 13:04
@MatsLindh When you say copy each request, which part of the network tab should I be copying from? Payload, Headers, etc.? — Connor, Oct 05 '22 at 13:06
Related answers can also be found [here](https://stackoverflow.com/a/70636163/17865804), [here](https://stackoverflow.com/a/73761724/17865804) and [here](https://stackoverflow.com/a/70669813/17865804). — Chris, Oct 05 '22 at 13:10

score 1 · Accepted Answer · answered Oct 05 '22 at 13:19

This error was caused by me incorrectly defining the Content-Type header in the fetch request. I used contentType as the request header, which was copied from the JQuery AJAX implementation.

Using this header with Fetch created an extra header type called contentType, whilst Content-Type, the header I was trying to change, was set to a default value.

The default value is text/html; charset=UTF-8, which doesn't match the "application/json; charset=utf-8" value I'm trying to use. This meant my data was unreadable by FastAPI on the backend.

Why does Switching from JQuery AJAX to Fetch cause a 422 Error?

1 Answers1