CODEWITHSUNDEEP
javascriptjqueryajaxgofetch
learningtech
learningtech

Reputation: 33673

Replacing jQuery.ajax() with fetch() to a Go REST API endpoint - empty payload

I currently have a ReactJS web application that creates a POST or PUT request to a REST API endpoint. The REST API is built with golang.

Everything works fine when I use jQuery to make the Ajax POST request. Here's a demonstration of the code:

// my jquery attempt

let sendUrl = "http://192.168.11.241:8000/user";
let sendType = "POST";

let data = {"userid":1};
const postData = [{name:"data",value:JSON.stringify(data)}];

let result = $.ajax({
  type: "POST",
  dataType: 'json',
  cache: false,
  url: sendUrl,
  data: postData
});

And here's what my REST API code looks like

// main.go
package main

import (
  "user"
  "github.com/gorilla/mux"
  "log"
  "net/http"
)

func main() {
    router := mux.NewRouter()
    router.HandleFunc("/payment/{payment_type}", user.Post).Methods("POST","OPTIONS")
     log.Fatal(http.ListenAndServe(":8000", router))
}

// user.go
func Post(w http.ResponseWriter, r *http.Request) {
  w.Header().Set("Access-Control-Allow-Origin", "*")
  w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
  url := mux.Vars(r)
  r.ParseForm()
  qs := r.Form
  fmt.Println(qs)
}

When I run the JS and Go API code, I successfully see the userid 1 content output to bash.

Now I replace my javascript code with fetch call like this:

let sendUrl = "http://192.168.11.241:8000/user";
let sendType = "POST";

let data = {"userid":1};
const postData = [{name:"data",value:JSON.stringify(data)}];

fetch(sendUrl, {
  method: "POST",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  //body: JSON.stringify(postData)
  body: {"data":JSON.stringify(data)}
});

My Go API acknowledges a POST request is being made, but the post data is empty and I don't see the userid 1. I tried different types of input for the body like with and without json.stringify, I tried different header information like 'Content-Type': 'application/x-www-form-urlencoded', or removing the headers all together, but the data continues to be empty when receiving with my go api.

Anyone know what I'm doing wrong?

Upvotes: 2

Views: 4827

Answers (2)

learningtech
learningtech

Reputation: 33673

Ok, I found the right combination of settings for my fetch() call to be this:

const sendUrl = "http://192.168.11.241:8000/user";
const sendType = "POST";
const data = {"userid":1};
const postData = "data="+JSON.stringify(data);

fetch(sendUrl, {
  method: sendType,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: postData
});

I had to re-work the structure of my postData object and also change the content-type

Upvotes: 3

Vishal Bondre
Vishal Bondre

Reputation: 62

remove quotes userid 

let data = {userid:1};

and declare dataType in ajax function

Upvotes: -1

Related Questions