title: Why is an object in an XMLHttpRequest sent to a Node/Express server empty?
body: <p>I am trying to make a form that takes the email address and sends a transactional email back. I am using a XMLHttpRequest in vanilla JavaScript to send data to the server, but when I look at the data sent from index.html, it is only an empty object on the server side.</p>
  
  <p>On the backend I am using Node and Express and Nodemailer. Nodemailer is working properly. I have been trying to figure out why the query object does not have anything in it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Here is server.js
  
  var express = require('express');
  var nodemailer = require('nodemailer');
  var app = express();
  
  // Send index.html
  app.get('/', function(request, response) {
    response.sendfile('index.html');
  });
  
  // Where I should receive data from JS written in index.html
  app.post('/send', function(req, res) {
    var mailOptions　 = 　 {
      to: req.query.to,
      subject: req.query.subject,
      text: req.query.text
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Here is my index.html with some JS in it --&gt;
  
  &lt;div&gt;
    &lt;input id="to" type="text" placeholder="Email" /&gt;
    &lt;input id="subject" type="text" placeholder="subject" /&gt;
    &lt;textarea id="content" cols="20" rows="2" placeholder="Write something"&gt;&lt;/textarea&gt;
    &lt;button id="submit"&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    // When #submit is clicked it invokes a function to collect values and then makes a XMLHttpRequest like bellow
    data = {to: to, subject: subject, text: text};
    var request = new XMLHttpRequest();
    request.open('GET', 'http://localhost:3000/send', true);
    request.send(data);
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>