CODEWITHSUNDEEP
sql-servernode.jsajaxexpresspolymer
KVNA
KVNA

Reputation: 907

POST JSON with iron-ajax to SQL Server with Node

I am trying to return user data from a login with Polymer. I have it working with Postman, but am having trouble translating it into Polymer.

In Postman this returns a JSON object, but in Polymer it is returning undefined.

Polymer Client Code [Connecting to node.js server]

<iron-ajax id="ajaxUser"
  url="http://localhost:8080/login"
  method="post"
  handle-as="json"
  content-type="application/json"
  headers='{"Access-Control-Allow-Origin": "*"}'
  params="[[params]]"
  on-response="saveUserCredentials"
  last-response="{{user}}"></iron-ajax>

...

<paper-input id="username"></paper-input>
<paper-input id="password"></paper-input>
<paper-button on-tap="loginUser"></paper-button>

...

loginUser() {
  this.params = {"username": this.$.username.value, "password": this.$.password.value};
  console.log(this.params); // logs this.params as populated JSON 
  let request = this.$.ajaxUser.generateRequest();
  request.completes.then(req => {
    console.log(req);       // logs <iron-request></iron-request>
    console.log(this.user); // logs []
  })
  .catch(rejected => {
    console.log(rejected.request); // not returned
    console.log(rejected.error);   // not returned
  })
}

saveUserCredentials() {
  console.log(this.user);
}

Node, Express, mssql Server Code [Connecting to SQL Server database]

app.post("/login", (req, res) => {
  session.login(req, res)
})

...

exports.login = (req, res) => {
  sql.connect(config.properties)
    .then(pool => {
      pool.request()
        .input('user', sql.VarChar(50), req.body.username)
        .input('password', sql.VarChar(50), req.body.password)
        .query("SELECT role FROM Login WHERE username = @user AND password = @password")
        .then(response => res.send(response))
        .catch(err => res.send(err))
    })
}

Error

SyntaxError: Unexpected token # in JSON at position 0 . at JSON.parse ()
at createStrictSyntaxError (C:\node_modules\body-parser\lib\types\json.js:157:10) at parse (C:\node_modules\body-parser\lib\types\json.js:83:15)
at C:\node_modules\body-parser\lib\read.js:121:18 . at invokeCallback (C:\node_modules\raw-body\index.js:224:16)
at done (C:\node_modules\raw-body\index.js:213:7)
at IncomingMessage.onEnd (C:\node_modules\raw-body\index.js:273:7)
at IncomingMessage.emit (events.js:159:13)
at endReadableNT (_stream_readable.js:1062:12)
at process._tickCallback (internal/process/next_tick.js:152:19)

Upvotes: 0

Views: 559

Answers (1)

tony19
tony19

Reputation: 138366

The first issue appears to be that your server is expecting a JSON object in the request, but the server sees the request as a string due to a missing Content-Type header on your request. To set the Content-Type for JSON requests, set <iron-ajax>.contentType to application/json:

<iron-ajax content-type="application/json" ...>

OK, I was able to get a server response by setting content-type=application/json as an iron-ajax property. Am now getting Unexpected token # in JSON at position 0 as a server side error...

That sounds like the request is not actually valid JSON (since it contains a # as the first character). Use the Chrome DevTools Network Panel to inspect the actual contents of the payload. I wouldn't rely solely on console.log in your code.

Also, it is now making two requests when I submit. One with the content-type set, which resolves to 200, and one with that resolves to 400 with parsing error.

The first message is likely the preflight request, which is sent (as part of CORS) to the server to check whether content-type="application/json" is an allowed header. The second message is the intended data request, but that fails with the following error.

And a client side error of No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4001' is therefore not allowed access. The response had HTTP status code 400.

Your server needs to enable CORS requests. There are various ways to accomplish this, but the simplest Node solution might be to use the cors package:

const cors = require('cors');
const app = express();
app.use(cors());

Upvotes: 1

Related Questions