React使用Axios向Express后端发送数据失败，抛出Unsupported protocol localhost: axoos错误

我一眼就看到了问题所在——你的请求URL缺少了协议头，这就是Axios抛出Unsupported protocol localhost: axoos错误的核心原因！咱们一步步来修复所有问题：

1. 修正请求URL #

你当前的URL是localhost:5000/api/contact，Axios会把localhost误认为是协议（比如http/https），导致协议不支持的错误。有两种修复方式：

• 方式一：加上完整的协议头：const url='http://localhost:5000/api/contact'
• 方式二：利用你已经配置的React代理，直接写相对路径：const url='/api/contact'（推荐，这样生产环境切换域名更方便）

2. 移除多余的JSON.stringify #

Axios默认会自动将JavaScript对象序列化为JSON，并设置正确的Content-Type: application/json请求头。手动调用JSON.stringify反而可能导致后端解析异常，直接传递formData对象即可。

3. 修复表单中的textarea标签错误 #

你使用了<input type="textarea">，这是错误的写法——HTML里没有type="textarea"的input类型，应该替换为标准的<textarea>标签。

4. 移除组件无用的参数 #

你的Contact组件定义了(e)参数，但这个参数是组件的props，不是事件对象，完全没用，应该改为const Contact = () => {。

修改后的完整代码 #

import React, { useState } from 'react'
import './contact.css'
import axios from "axios"

const Contact = () => {
  const [email, setEmail] = useState('')
  const [description, setDescription] = useState('');
  const [message, setMessage] = useState('')
  const [name, setName] = useState('')
  
  // 推荐使用代理的相对路径，或者加上http://前缀
  const url='/api/contact'

  const contactClick = async (e) => {
    const subject = "contacting"
    e.preventDefault();
    const formData = {
      name: name,
      email: email,
      subject: subject,
      description: description
    }
    
    console.log(formData);
    axios.post(url, formData)
      .then(res => setMessage('Email sent successfully!'))
      .catch(err => {
        setMessage('Unable to send email')
        console.error(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)} 
          />
          {/* 替换为正确的textarea标签 */}
          <textarea 
            placeholder='Description' 
            className='text-area' 
            value={description} 
            onChange={(e) => setDescription(e.target.value)}
            required
          />
          <input type="submit" value="Submit" />
        </form>
      </div>
    </>
  )
}

export default Contact

这些修改应该能解决你的问题：Axios能正确识别请求地址，正确发送JSON数据到后端，表单的textarea也能正常工作。另外记得检查你的React代理配置是否正确（在package.json里的proxy字段），确保请求能正确转发到后端服务。

内容的提问来源于stack exchange，提问作者sumitkhatrii