TypeError Fetch API Post

Ask the community
,
1

I’m struggling to get a post API call to work, it always responds immediately with TypeError. How can I get more details behind the error to diagnose it?

export function createbutton_click ( event ) {

**const**  url  =  "url_here" ; 
**const**  apitoken  =  "token_here" 

fetch (  url , { 
"method" :  "post" , 
"headers" : { 
    "Content-Type" :  "application/json" , 
    "Accept" :  "application/json" , 
    "Token" :  apitoken 
}, 
"body" :  "{/"subjects/": [/"subject1/", /"subject2/"]}" 
} ) 
. then ( ( httpsResponse ) => { 
    **if**  ( httpsResponse . ok ) { 
    **return**  httpsResponse . json () 
    . then (( data ) => { 
        console . log ( data ); 
    }) 
    }  **else**  { 
    **return**  Promise . reject ( "Fetch did not succeed" ); 
    } 
}) 
. then ( ( json ) => { 
    //Do something with the response 
    console . log ( json ) 
}) 
. **catch** (( error ) => { 
    //Catch the error - ALWAYS ERRORS HERE WITH TYPEERROR 
    console . log ( error ) 
});

}

I can call the API just fine using Postman. The body looks like this in Postman:
{
“subjects” : [
“subject1” ,
“subject2”
]
}

2

Is this your final code? Because this code is for POST, usually when you are trying to access something, you need to GET. Then, you need to put an url .

Like this:

import { fetch } from "wix-fetch"

export function createbutton_click(event) {
    const url = "https://jsonplaceholder.typicode.com/todos/1"

    let fetching = fetch(url, {
            method: "GET"
        })
        .then(httpsResponse => {
            if (httpsResponse.ok) {
                return httpsResponse.json().then(data => data)
            } else {
                return Promise.reject("Fetch did not succeed")
            }
        })
        .then(response => console.log(response)) //This is the response
        .catch(error => {
            console.log(error)
        })
}
3

Hi Bruno, I need to make a POST call, it works fine in Postman.

Here is my updated code, adding no-cors to the header to get around that error I found using Chrome Dev Tools:

const url = “https://url” ;
const apitoken = “access_token”
var subjects ={
subjects : [ ‘subject1’ , ‘subject2’ ]
}

let  fetching  =  fetch ( url , { 
        method :  "POST" , 
        "mode" :  "no-cors" , 
        "headers" : { 
            "Content-Type" :  "application/json" , 
            "Accept" :  "application/json" , 
            "X-RFToken" :  apitoken 
        }, 
        "body" :  JSON . stringify ( subjects ) 
    }) 
    . then ( httpsResponse  => { 
        console . log ( httpsResponse ) 
        if  ( httpsResponse . ok ) { 
            **return**  httpsResponse . json (). then ( data  =>  data ) 
        }  **else**  { 
            **return**  Promise . reject ( "Fetch did not succeed" ) 
        } 
    }) 
    . then ( response  =>  console . log ( response ))  //This is the response 
    . catch ( error  => { 
        console . log ( error ) 
    })

I get nothing back, no error, no response. It fails “Fetch did not succeed” immediately.

4

Using Chrome Dev Tools, I’m seeing this:

1062×316 21.7 KB

5

need to move to backend call and not client side.

6

@stephenaldous do you have the proper url API you are trying to fetch?

Post seems to be working fine to another API.

7

@bwprado i’ve moved it to backend code from client side and it works now.