Create columns in custom list using REST API with SPFx

Question

Below is my code, every time I am getting 400, I am trying spHttpClient to create a column in a SP List.. Please suggest

SPFx Code

    let listTitle = document.getElementById("txtListTitle")["value"]; //TestList
    let columnName = document.getElementById("txtColumnName")["value"]; //
    let columnType = $("#ddlColumnType :selected").val();//2 for Single Line of Text
    columnType = parseInt(columnType.toString());
    let fieldType = $("#ddlColumnType :selected").attr("name")//"SP.Field"
    let SelectedText = $("#ddlColumnType :selected").text();//"Single Line Of Text"

    const fieldQry: string = this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('" + listTitle + "')/fields";

    const objectData: any = {
      '__metadata': { 'type': fieldType },
      'FieldTypeKind': columnType,
      'Title': columnName
    }
    const fieldsClientOptions: ISPHttpClientOptions = {
      "body": JSON.stringify(objectData)
    }
    this.context.spHttpClient.post(fieldQry, SPHttpClient.configurations.v1, fieldsClientOptions).then(
      (responseColumn: SPHttpClientResponse) => {
        if (responseColumn.status == 201) {
          alert(columnName + " column created!!")
        }
      })

Answer 1

You need to modify the code as below, we are adding slightly modified headers for SPFx as it uses OData v4 behind the scenes:

const headers = new Headers();
headers.append("Accept", "application/json;odata.metadata=full");
headers.append("Content-type", "application/json;odata.metadata=full");

const fieldsClientOptions: ISPHttpClientOptions = {
    headers: headers,
    body: `{ "@odata.type": "#SP.Field", "Title": columnName, "FieldTypeKind": columnType}`
};