I keep receiving a warning in the request header that says: Provisional headers are shown. I'm struggling to identify the root cause of this issue. This warning prevents the readyState from changing and my callbacks on the eventhandler onreadystatechange are not being triggered. I suspect the problem lies within the application/json request header, but so far, I haven't been able to find a solution. If anyone has any insights on how to resolve this, I would greatly appreciate it. Here is my AJAX Code:
export default function ajax() {
const form = document.forms[0];
const xhr = new XMLHttpRequest();
form.addEventListener('submit', (e) => {
e.preventDefault();
// FORMDATA TO JSON OBJECT
const fields = document.querySelectorAll('form > div');
let formData = {};
fields.forEach((container) => {
formData[container.childNodes[0].name] = container.childNodes[0].value;
})
const formDataJSON = JSON.stringify(formData);
xhr.open('POST', '/send', true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if(this.readyState === this.DONE && this.status === 200)
console.log('success');
else if(this.readyState === this.UNSET)
console.log('failed');
else if(this.readyState === this.LOADING)
console.log('loading');
}
xhr.send(formDataJSON);
})
}
Nodemailer:
module.exports = (data) => {
const _auth = require('./_auth');
const nodemailer = require('nodemailer');
const transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: _auth.user,
pass: _auth.pass
}
});
const html = `
<div style="background-color: #F3F4F7; border-radius: 10px; padding: 50px;">
<h2>Sie haben eine neue Nachricht</h2>
<p>${data.nachricht}</p>
<h3>Absender</h3>
<ul>
<li>Name: ${data.name}</li>
<li>Email: ${data.email}</li>
<li>Tel: ${data.tel}</li>
</ul>
</div>
`;
const mailOptions = {
from: data.email,
to: _auth.user,
subject: '20° - Nachricht',
text: data.nachricht,
html
};
transporter.sendMail(mailOptions, function(error, info){
if (error)
console.log(error);
else
console.log('Email sent: ' + info.response);
transporter.close();
});
}