在 React 中，数据未使用 axios 发送到后端，并且抛出 Unsupported protocol localhost: axoos

Question

我使用express js作为后端，并且还在react js的package.json中添加了后端代理。之前它曾经用 fetch 方法抛出错误，并转移到 axios 方法来防止这种情况。数据是json格式，复制粘贴到postman上检查后端后完全可以工作。

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>
    </div>
    </>
  )
}

export default Contact

Answer 1

不支持的协议：本地主机

因为您使用的 URL 作为localhost协议：

const url='localhost:5000/api/contact'

将此与“完整”URL 进行比较：

const url='http://localhost:5000/api/contact'

URL 以协议和冒号开头。无论解析该 URL 是什么，都不会直观地知道您的意思，它只是会根据标准解析您提供的字符串。

指定协议：

const url='http://localhost:5000/api/contact'

或者省略它，但保留//根目录以使用当前页面正在使用的任何协议：

const url='//localhost:5000/api/contact'

Answer 2

我认为axios.post()将数据作为对象而不是文档中提到的字符串。

将其替换为axios.post(url, formData)而不对其进行字符串化。

https://axios-http.com/docs/post_example

但结果数据JSON.stringify(formData)是'{the data}'