how to submit data from a data form in axios

Question

I am trying to send a form to an endpoint but I get an error forbidden 403, and I already tried with an api test and the endpoint works perfectly

const SendData = (event) => {
    event.preventDefault();
    let respuestasUSer = new FormData();
    respuestasUSer.set('curso', state.curso)
    respuestasUSer.set('nombre', state.nombre)
    respuestasUSer.set('q1', state.Pregunta1)
    respuestasUSer.set('q2', state.Pregunta2)
    respuestasUSer.set('q3', state.Pregunta3)
    respuestasUSer.set('q4', state.Pregunta4)
    respuestasUSer.set('q5', state.Pregunta5)
    respuestasUSer.set('q6', state.Pregunta6)
    respuestasUSer.set('q7', state.Pregunta7)
    respuestasUSer.set('q8', state.Pregunta8)
    axios({
        method: "post",
        url: "https://covid.cit0.com/guardar/encuesta/",
        data: respuestasUSer,
        headers: { "Content-Type": "multipart/form-data" },
      })
        .then(function (response) {
          //handle success
          console.log(response);
        })
        .catch(function (response) {
          //handle error
          console.log(response);
        });   
}

In the api test I do it like this and it works for me, how could I pass this same content to axios?

First step... remove the `Content-type` header, [you don't need it](https://stackoverflow.com/a/68643919/283366). A 403 response suggests your authentication credentials do not allow you to request the resource in question. You don't seem to have any credentials at all in the code above so you'll need to share more information — Phil, Sep 21 '21 at 06:38
I have added an image the way I have been able to do it with the test api — Andres Mendez, Sep 21 '21 at 06:56
The site you're attempting to POST to requires a [CSRF token](https://stackoverflow.com/q/5207160/283366) be present in a request cookie. You should be able to see the details of this in the response you get back. Basically, that site doesn't want external parties posting content. It also doesn't support CORS access — Phil, Sep 21 '21 at 07:05
I am passing it a CSRF token but if it works in the test api, why not in my app if I am putting the same token? — Andres Mendez, Sep 21 '21 at 07:17
Where? Your Axios request doesn't have anything like that in it. If you have the token in a cookie already, you could [try adding `withCredentials: true`](https://stackoverflow.com/a/43178070/283366) but I think you'll just run into CORS errors — Phil, Sep 21 '21 at 07:20
Do not post it, but if I add the token, sorry where I add that code "withCredentials: true" — Andres Mendez, Sep 21 '21 at 07:22

score -1 · Answer 1 · answered Sep 21 '21 at 06:51

If you are using react as front end

first you set onchange event in input text field like

<form>
<input type="text" name="first_name" placeholder="first name" onChange={handlechange} />

Create

define that handlechange function like

function handlechange (e) {
        const {name,value} = e.target
        setstate({...state,[name]:value}) 

}

//before that want to define state like const [state, setstate] = useState({})

then define handleclick function like

    function handleclick (e) {
            e.preventDefault()
            
             axios.post('/super_admin/newuser',state).then((res)=>{
                
console.log(res.data)
                
            }).catch(err=>{

console.log(err.response.data)

})
    }

here is the full code

import {useState, } from 'react'
import axios from 'axios'

export default function Newuser() {

const [state, setstate] = useState({})

function handlechange (e) {
        const {name,value} = e.target
        setstate({...state,[name]:value})
    }

function handleclick (e) {
                e.preventDefault()
                
                 axios.post('/your api',state).then((res)=>{
                    
    console.log(res.data)
                    
                }).catch(err=>{
    
    console.log(err.response.data)
    
    })
        }

return (

<div>
<form>
<input type="text" name="first_name" placeholder="first name" onChange={handlechange} />
<button onClick={handleclick}>Create</button>
</form>
</div>
)

}

Are you sure you answered the right question? This answer doesn't seem to match anything above — Phil, Sep 21 '21 at 06:54
he is using react from data what is the mistake bro simply giving -vote i am taking effort to give this answer ok — Tony George, Sep 21 '21 at 06:58
I think your answer is not according to my question, what you put me I already did, what I want is to send a form Data by axios and what I am sending with your answer is a JSON — Andres Mendez, Sep 21 '21 at 06:58
Tips for getting upvotes: make sure your work is spell-checked, and use the correct case for sentences based on the normal writing rules for international English. If it looks like it was composed on a mobile phone, or if the code formatting is poor, then it might get downvoted. If you make a genuine effort over the long term then you will get more upvotes than down - effort is key. — halfer, Nov 13 '21 at 10:55

score -1 · Answer 2 · answered Sep 21 '21 at 07:07

-1

for sending form data you can edit handleclick function to something like this

    function handleclick (e) {
       e.preventDefault()

   const fd = new FormData()

                fd.append('first_name',state.first_name)

                 axios.post('/your api',fd).then((res)=>{
                    
    console.log(res.data)
                    
                }).catch(err=>{
    
    console.log(err.response.data)
    
    })
        }

answered Sep 21 '21 at 07:07

Tony George

116
14

why man giving -vote this is the way to send from data right – Tony George Sep 21 '21 at 07:10
give me the response bro why you given -vote – Tony George Sep 21 '21 at 07:14
How is this functionally any different to what OP already has? How does it solve their 403 response problem? – Phil Sep 21 '21 at 07:22
hey bro the meaning is same right what man he is using sendData i used handleclick what man ..? – Tony George Sep 21 '21 at 07:26

how to submit data from a data form in axios

2 Answers2