Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Data is not sent using axios to backend in react and Unsupported protocol localhost: axoos is thrown

I am using express js as backend and also have added proxy of backend in the package.json of react js. Before it used to throw an error with fetch method and moved to the axios method to prevent that. The data is in json format and completely working after copy pasting on postman to check backend.

import React ,{useState} from 'react'
import './contact.css'
import axios from "axios"
const Contact = (e) => {
    const [email, setEmail] = useState('')
    const [description,setDescription]=useState('');
    const[message,setMessage]=useState('')
const [name ,setName] = useState('')
const url='localhost:5000/api/contact'
    const contactClick=async (e)=>{
      const subject="contacting"
        e.preventDefault();
      const formData={
        name:name,
        email:email,
        subject:subject,
        description:description
      console.log(JSON.stringify(formData));
      axios.post(url, JSON.stringify(formData))
   .then(res => setMessage('email sent'))
   .catch(err => {setMessage('Unable to sent email ')
  return console.log(err)})
  return (
    <div className='form__container' >
    <form onSubmit={contactClick} className='contact__form'>
    {message}
        <input type="email" placeholder='Email' value={email} required onChange={(e)=>setEmail(e.target.value) 
        <input type="text"  placeholder='name' value={name} required onChange={e=>setName(e.target.value)} />
        <input type="textarea" placeholder='Description' className='text-area' value={description} onChange={(e)=>setDescription(e.target.value)}/>
        <input type="submit" title="Submit" />
    </form>
export default Contact
                Mostly a guess but, why the use of JSON.stringify?  Isn't axios just expecting the object, not a string?
– David
                Jul 29, 2022 at 12:26
                Can you provide a little more information? What error were you getting? fetch should just work, replacing with axios should be unnecessary. If I had to guess I'd say CORS but without more information I can't really tell what's going on. What is the error you are receiving?
– TheFunk
                Jul 29, 2022 at 12:31
                So you actually have a folder named localhost:5000 inside the current folder? No? Then why did you specify a relative URL?
– CBroe
                Jul 29, 2022 at 12:32
                The error above is specifying that your URI is invalid. You need to put http:// in front of localhost. It thinks localhost is your protocol because it hasn't been told what protocol to use to connect to localhost.
– TheFunk
                Jul 29, 2022 at 12:43
Because the URL you're using has localhost as a protocol:
const url='localhost:5000/api/contact'
Compare this to a "complete" URL:
const url='http://localhost:5000/api/contact'
The URL starts with a protocol and a colon.  Whatever is parsing that URL isn't going to intuitively know what you meant, it's just going to parse the string you provided based on standards.
Either specify the protocol:
const url='http://localhost:5000/api/contact'
Or omit it but keep the // root to use whatever protocol the current page is using:
const url='//localhost:5000/api/contact'
I think axios.post() takes data as object not string as mentioned here in the docs.
replace it with axios.post(url, formData) without stringifying it.
https://axios-http.com/docs/post_example
But the resulted data from JSON.stringify(formData) is '{the data}'
                I have added image of the error after changing it back to object and passing it in axios.
– sumitkhatrii
                Jul 29, 2022 at 12:33
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.