Wednesday, October 26, 2022

[SOLVED] AJAX call with jQuery doesn't act like CURL

Issue

I'm looking to make API call in javascript using AJAX provided by jQuery, but I receive an unprocessable entity error (a pydantic error response from my fastapi server). The strange part is that a curl command DOES work. Its not clear to me why my server can distinguish between the faulty ajax call and the successful curl call.

curl -X 'POST' \
  'http://127.0.0.1:8010/api/update' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{"gsid":"634ad79ee29c42396b0d4055","ticker":"SPX230317C04200000","security_type":5,"security_subtype":2005,"option_flavor":2,"underlying":{"gsid":"634ad6d1d89536dac325f871","ticker":"SPX"},"denominated_ccy":{"gsid":"634ad6d1d89536dac325f86e","ticker":"USD"},"expiry_date":"2023-03-17","strike":4200,"option_exercise":1,"expiry_series_type":20,"expiry_time_of_day":1,"settlement_type":1,"primary_exchange":"CBO","multiplier":100,"issuer":0,"description":0,"website":0,"as_of_date":"1970-01-01T00:00-05:00","expiry_datetime":"1969-12-31T19:00-05:00","identifiers":[{"id_type":2,"value":""},{"id_type":3,"value":""},{"id_type":4,"value":""},{"id_type":5,"value":""}]}'

My API responds to this call correctly, with the following 200 success response:

{
  "success": true,
  "created_security": false,
  "gsid": "634ad79ee29c42396b0d4055",
  "available_versions": [
    "1970-01-01T00:00:00-05:00"
  ],
  "message": "success"
}

AJAX call with jQuery

data = {"gsid":"634ad79ee29c42396b0d4055","ticker":"SPX230317C04200000","security_type":5,"security_subtype":2005,"option_flavor":2,"underlying":{"gsid":"634ad6d1d89536dac325f871","ticker":"SPX"},"denominated_ccy":{"gsid":"634ad6d1d89536dac325f86e","ticker":"USD"},"expiry_date":"2023-03-17","strike":4200,"option_exercise":1,"expiry_series_type":20,"expiry_time_of_day":1,"settlement_type":1,"primary_exchange":"CBO","multiplier":100,"issuer":0,"description":0,"website":0,"as_of_date":"1970-01-01T00:00-05:00","expiry_datetime":"1969-12-31T19:00-05:00","identifiers":[{"id_type":2,"value":""},{"id_type":3,"value":""},{"id_type":4,"value":""},{"id_type":5,"value":""}]};
payload = JSON.stringify(data);

$.ajax({
    url: 'http://127.0.0.1:8010/api/update',
    type : "POST",
    dataType: 'json',
    processData: false,
    success: function(data){
        console.log('success: '+JSON.stringify(data));
    },
    error: function(data){
        console.log('error: '+JSON.stringify(data));
    },
    data : payload,
});

Here I get the following 422 unprocessable entity response from my server:

{"readyState":4,"responseText":"{\"status_code\":10422,\"message\":\"4 validation errors for Request body value is not a valid dict (type=type_error.dict) body value is not a valid dict (type=type_error.dict) body value is not a valid dict (type=type_error.dict) body value is not a valid dict (type=type_error.dict)\",\"data\":null}","responseJSON":{"status_code":10422,"message":"4 validation errors for Request body value is not a valid dict (type=type_error.dict) body value is not a valid dict (type=type_error.dict) body value is not a valid dict (type=type_error.dict) body value is not a valid dict (type=type_error.dict)","data":null},"status":422,"statusText":"Unprocessable Entity"}

Solution

EDIT Adding the following to the ajax call worked:

contentType: "application/json"

Answer proposed by @addjunior



Answered By - alienbrett
Answer Checked By - Gilberto Lyons (WPSolving Admin)
at