Я пытаюсь отправить сообщение с express api, но получаю: -
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)
Я использую nodemailer и mailgun для отправки этой формы по электронной почте, у меня есть две формы, которые Я пытаюсь отправить, одна форма и ее api работают отлично, но я получаю сообщение об ошибке при отправке формы запроса.
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">×{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
Я не уверен если это проблема с сервером или интерфейсом
, это мой 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!!!' })
}
})
})