我收到了（请求失败，状态码为 500）

Question

I'm trying to post with an express api, but im getting:-

Error: Request failed with status code 500
at e.exports (createError.js:16)
at e.exports (settle.js:17)
at XMLHttpRequest.p.onreadystatechange (xhr.js:61)

I'm using nodemailer and mailgun to send this form to an email, I have two forms that im trying to send, one forms and its api are working perfectly, but im getting an error when sending the enquiry form.

EnquiryForm.js

class EnquiryForm extends Component {
state = {
    companyname: '',
    name: '',
    address: '',
    postCode: '',
    country: '',
    city: '',
    email: '',
    telefon: '',
    message: '',
    payment: '',
    shipping: '',
    cart: JSON.parse(localStorage.getItem('dataArr')),
    errors: {}
}
/**            cart: this.state.cart */
onFormSubmit = async (event) => {
    event.preventDefault();
    this.setState({ errors: {} })
    const enquiryData = {
        companyname: this.state.companyname,
        name: this.state.name,
        email: this.state.email,
        telefon: this.state.telefon,
        message: this.state.message,
        address: this.state.address,
        postCode: this.state.postCode,
        country: this.state.country,
        city: this.state.city,
        payment: this.state.payment,
        shipping: this.state.shipping,
    }

    console.log(enquiryData);

    await axios.post('/enquirypost', enquiryData)
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err);
            this.setState({ errors: err.response.data })
        })
}

changeHandler = (event) => {
    this.setState({
        [event.target.name]: event.target.value
    })
}
render() {
    const productArray = JSON.parse(localStorage.getItem('dataArr'));
    const { errors } = this.state;
    return (
        <div className="EnquiryFormBackground" style={{ width: '100%', height: '100%' }}>
            <Card className="Enquiry-Form-Box" style={{ marginBottom: '4%' }}>
                <div className="Enquiry-Form-Box-top" style={{ textAlign: 'center' }}>
                    <span className="EnquiryFormTitle">PRODUCT LIST</span>
                    {productArray.map(d => (
                        <Card className="EnquiryProductRow" style={{ margin: '2% 2%' }} key={d.Heading}>
                            <div className="productCellF">
                                <img
                                    src={d.Img}
                                    alt='Product-image'
                                    className='imgCellF' />
                                <p className="textCellF">{d.Heading}</p>
                            </div>
                            <div className="tableCellF">
                                <p className="textCellF">&times;{d.Quantity === undefined ? 1 : d.Quantity}</p>

                            </div>
                            <div className="tableCellF">
                                <p className="textCellF">€{d.IngPrice}</p>
                            </div>
                        </Card>
                    ))}
                </div>
            </Card>
            <Card className="Enquiry-Form-Box">
                <div className="Enquiry-Form-Box-top" style={{ textAlign: 'center' }}>
                    <span className="EnquiryFormTitle">ENQUIRY FORM</span>
                </div>
                <form onSubmit={this.onFormSubmit}>
                    <TextField
                        classes={{ margin: ' 2% 10%' }}
                        className="Enquiry-Form-Input"
                        id="standard-secondary"
                        label="Firmenname"
                        color="primary"
                        name="companyname"
                        type="text"
                        onChange={this.changeHandler}
                        helperText={errors.companyname}
                        error={errors.companyname ? true : false}
                        required
                    />
                    <TextField
                        className="Enquiry-Form-Input"
                        id="standard-secondary"
                        label="Name"
                        color="primary"
                        name="name"
                        type="text"
                        onChange={this.changeHandler}
                        helperText={errors.name}
                        error={errors.companyname ? true : false}
                        required
                    />
                    <TextField
                        className="Enquiry-Form-Input"
                        id="standard-secondary"
                        label="Adresse"
                        color="primary"
                        name="address"
                        type="text"
                        onChange={this.changeHandler}
                    />
                    <TextField
                        className="Enquiry-Form-Input"
                        id="standard-secondary"
                        label="Postleitzahl"
                        color="primary"
                        name="postCode"
                        type="text"
                        onChange={this.changeHandler}
                    />
                    <Select
                        className="Enquiry-Form-Input"
                        native
                        label="Land"
                        color="primary"
                        name="country"
                        onChange={this.changeHandler}
                        helperText={errors.country}
                        error={errors.companyname ? true : false}
                        required
                    >
                        {countryList.getNames().map(e => (
                            <option key={e}>{e}</option>
                        ))}
                    </Select>
                    <TextField
                        className="Enquiry-Form-Input"
                        id="standard-secondary"
                        label="Stadt"
                        color="primary"
                        name="city"
                        type="text"
                        onChange={this.changeHandler}
                    />
                    <TextField
                        className="Enquiry-Form-Input"
                        id="standard-secondary"
                        label="E-Mail"
                        color="primary"
                        name="email"
                        type="email"
                        onChange={this.changeHandler}
                        helperText={errors.email}
                        error={errors.companyname ? true : false}
                        required
                    />
                    <TextField
                        className="Enquiry-Form-Input"
                        id="standard-secondary"
                        label="Telefon"
                        color="primary"
                        name="telefon"
                        type="text"
                        onChange={this.changeHandler}
                    />
                    <TextField
                        className="Enquiry-Form-Input"
                        id="standard-secondary"
                        label="Ihre Nachricht"
                        color="primary"
                        name="message"
                        type="text"
                        onChange={this.changeHandler}
                        variant="outlined"
                        multiline
                        rows={4}
                    />
                    <div className="Enquiry-Form-Box-top">
                        <span className="EnquiryFormTitle">SHIPPING</span>
                    </div>
                    <RadioGroup
                        className="Enquiry-Form-Input"
                        aria-label="shipping"
                        name="shipping"
                        onChange={this.changeHandler}
                        helperText={errors.shipping}
                        error={errors.companyname ? true : false}>
                        <FormControlLabel className="EnquiryFormRadioBtn" value="DHL" control={<Radio />} label="DHL" />
                        <FormControlLabel className="EnquiryFormRadioBtn" value="Spedition" control={<Radio />} label="Spedition" />
                    </RadioGroup>
                    <div className="Enquiry-Form-Box-top">
                        <span className="EnquiryFormTitle">PAYMENT</span>
                    </div>
                    <RadioGroup
                        className="Enquiry-Form-Input"
                        aria-label="payment"
                        name="payment"
                        onChange={this.changeHandler}
                        helperText={errors.payment}
                        error={errors.companyname ? true : false}>
                        <FormControlLabel className="EnquiryFormRadioBtn" value="VorkasseWir teilen Ihnen die Gesamtkosten inkl. Versand mit und Sie überweisen dann per Vorkasse" control={<Radio />} label="VorkasseWir teilen Ihnen die Gesamtkosten inkl. Versand mit und Sie überweisen dann per Vorkasse" />
                        <FormControlLabel className="EnquiryFormRadioBtn" value="PaypalWir teilen Ihnen die Gesamtosten inkl. Versand mit und Sie überweisen dann mit Paypal" control={<Radio />} label="PaypalWir teilen Ihnen die Gesamtosten inkl. Versand mit und Sie überweisen dann mit Paypal" />
                    </RadioGroup>
                    <Button
                        variant="contained"
                        color="primary"
                        type="submit"
                        className="EnquiryFormBtn">
                        <span className="EnquiryFormBtnTitle">
                            Submit
                        </span>
                    </Button>
                </form>
            </Card>
        </div >
    )
}
 }

export default EnquiryForm

I'm not sure if its a problem with the backend or frontend

this is my express api:-

app.post('/enquirypost', (req, res) => {
//SENDING EMAIL
const data = {
    companyname: req.body.companyname,
    name: req.body.name,
    email: req.body.email,
    telefon: req.body.telefon,
    message: req.body.message,
    address: req.body.address,
    postCode: req.body.postCode,
    country: req.body.country,
    city: req.body.city,
    payment: req.body.payment,
    shipping: req.body.shipping
};
console.log(data);


const { valid, errors } = enquiryCheck(data);
if (!valid) return res.status(400).json(errors);

const html = `
    <h3>Contact Details</h3>
    <ul>
        <li>company name: ${data.companyname}</li>
        <li>name: ${data.name}</li>
        <li>email: ${data.email}</li>
        <li>telefon: ${data.telefon}</li>
        <li>address: ${data.address}</li>
        <li>postCode: ${data.postCode}</li>
        <li>country: ${data.country}</li>
        <li>city: ${data.city}</li>
        <li>payment: ${data.payment}</li>
        <li>shipping: ${data.shipping}</li>
    </ul>
    <h3>Message</h3>
    <p>${data.message}</p>
`;

console.log(req.body);
sendEnquiry(data.email, data.message, html, (err, data) => {
    if (err) {
        res.status(500).json({ message: 'Internal Error' })
    } else {
        res.json({ message: 'Email Sent!!!' })
    }
})

})

Answer 1

HTTP 500 means internal server error; and the api is responsible for handling that; it could be front-end (you) sending a malformed request and they didn't handle that case which raised an exception in server or there is actually a logical error on back-end side needed to be fixed; anyway you shouldn't receive 500 status from a server even if you are sending malformed request.