代理错误：无法代理请求/从 localhost:3000 发送到 http://localhost:3001/

问题描述

我正在将一些数据从我的 ReactJS 前端应用程序发送到我的节点/express 后端，但是，每当我发送数据时，我都会收到标题中提到的错误消息。

https://ibb.co/KbpwqZv

contact.js

这是我的 react js 代码，我在其中向通过 axios 与后端通信的人声明我的反应

import React,{ useState } from 'react'
import "./Contact.css";
import Axios from 'axios';
import {API} from '../backend';


const Contact = () => {

 const [state,setState]= useState({
     name:'',lastname:'',email:'',message:'',})


    const [result,setResult] = useState(null);

    const sendMail = e =>{
        e.preventDefault();
        Axios.post('/send',{...state})
        .then(response => {
            setResult(response.data);
            setState({
                name:'',message:''
            })
        })
        .catch(()=>{
            setResult({
                success:false,message:"Something went wrong. Try again later"
            })
            setState("");
        })
    }

    const onInputChange = e =>{
        const {name,value} = e.target;
    
    setState({
        ...state,[name]: value
    })
}

    console.log("API is",API);
    return (
        <>
        {result && (
            <p className={`${result.success ? 'success' : 'error'}`}>
                {result.message}
            </p>
        )}
            <section className='contactus'>
                <div className="container">
                    <h1 className='title'>CONTACT US</h1>
                    <form  >
                        <div className="singleItem">
                            <label htmlFor="name">Name</label>
                            <input type="text"
                                name="name"
                                className="name"
                                placeholder="Your Name..."
                                value={state.name}
                                onChange={onInputChange}
                            />
                        </div>
                        {/* <div className="singleItem">
                            <label htmlFor="Lastname">LastName</label>
                            <input type="text"
                                name="LastName"
                                className="LastName"
                                placeholder="Your Last Name..."
                                value={state.lastname}
                                onChange={onInputChange}
                            />
                        </div> */}
                        <div className="singleItem">
                            <label htmlFor="email">Email</label>
                            <input type="email"
                                name="email"
                                className="email"
                                placeholder="Your Email..."
                                value={state.email}
                                onChange={onInputChange}
                            />
                        </div>
                        <div className='textArea singleItem'>
                            <label htmlFor="message">Message</label>
                            <textarea name="message"
                                id=""
                                col="30"
                                rows="5"
                                placeholder="Your Message..."
                                value={state.message}
                                onChange={onInputChange}
                            >
                            </textarea>
                        </div>
                        <div className="msg">Message has been Sent</div>
                        <button type="button" className='btn btn-primary' onClick={sendMail}>Submit</button>
                    </form>
                </div>
            </section>

        </>
    )
}

export default Contact;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）