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

Question

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?

Why do you have the body: JSON.stringify(postData) commented out? That should work — Luca Kiebel
– Luca Kiebel, Commented Aug 11, 2018 at 16:03
@Luca haha! ok yes it did! I wonder why it didn't work before...must have been tired and didn't notice the success response. — learningtech
– learningtech, Commented Aug 11, 2018 at 16:06
Actually, looks like I needed 'Content-Type': 'application/x-www-form-urlencoded' along with body: JSON.stringify(postData) together — learningtech
– learningtech, Commented Aug 11, 2018 at 16:13

Adam · Accepted Answer · 2022-09-02 23:22:27Z

3

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

edited Sep 2, 2022 at 23:22

Adam

1411 silver badge11 bronze badges

answered Aug 11, 2018 at 16:12

learningtech

34k89 gold badges269 silver badges449 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vishal Bondre · Accepted Answer · 2018-08-11 19:36:47Z

-1

remove quotes userid

let data = {userid:1};

and declare dataType in ajax function

answered Aug 11, 2018 at 19:36

Vishal Bondre

621 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related