12

I have the following code which works is working well: 

import {inject} from 'aurelia-framework';
import {HttpClient, json} from 'aurelia-fetch-client';


@inject(HttpClient)
export class Items {
  heading = 'Items';
  apiKey = "";

  constructor(http) {
    http.configure(config => {
      config
        .useStandardConfiguration()
        .withBaseUrl('https://testme.com/api/')
          .withDefaults({
            headers: {
              'content-type': 'application/json',
              'Accept': 'application/json',
              'X-Requested-With': 'Fetch'
            }
          })
    });

    this.http = http;
  }

attach() {

let auth = {
  Username:"admin",
  Password:"1234"
};

return this.http.fetch('auth', {
      method: 'post',
      body: JSON.stringify(auth),
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
    .then(response => response.json())
    .then(response => {
      this.apiKey = response.APIKey;
      console.log(response);
});

However, if replace the body: JSON.stringify(auth) line with json(auth) which is I believe the correct way to JSON serialise an object using the Aurelia JSON helper, my API throws a bad request.

Is there anything different that the helper does vs JSON.stringify ?

user1513388
  • 7,165
  • 14
  • 69
  • 111
  • Is your API at the same domain as your website? If so, try to get rid of the absolute path (https:// ) in your config function. I can see that due to some reason the request body gets empty with absolute URLs, while your example works fine if I make a local request... – Mikhail Shilkov Dec 07 '15 at 23:26
  • No the API is at a different URL, which does actually give me a CORS problem, which I've disabled in Safari for the time being. – user1513388 Dec 07 '15 at 23:48
  • 1
    Please run a web proxy (e.g. fiddler) and see what exactly happens there. Then add the result to your question. Do you ever see your POST request or maybe just one with OPTIONS method? – Mikhail Shilkov Dec 08 '15 at 09:33
  • OK so I resolved this issue. Created a gulp proxy to my API and that fixed the issue. – user1513388 Dec 11 '15 at 19:51
  • 1
    I am getting a 415 (Unsupported Media Type) error with the above code , against ASP.Net WEB API ! – user636525 Feb 24 '16 at 04:54
  • @Mikhail I'm actually trying to figure out an issue right now which is doing exactly this. I am supplying the method: 'POST' option, but my network tab is reporting that it's using the OPTIONS method instead, with no body. I have tried using both JSON.stringify() and json() (doesn't seem related, but...) – Anj May 13 '16 at 18:19
  • 1
    @Anj Most probably you are having CORS issues. With OPTIONS request your browser is trying to figure out if it's allowed to send other requests to external domain https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS – Mikhail Shilkov May 13 '16 at 19:41
  • @Mikhail Yep, got Web API configured to allow CORS properly; thanks! – Anj May 13 '16 at 19:47

1 Answers1

6

The json function calls JSON.stringify, but also adds Content-Type: application/json to the headers. I'm wondering if the error that's thrown for you might be due to the header already existing since you're explicitly adding it.

Try using json again, but this time remove your code that modifies the headers to add that Content-Type.

See here for the code for that json function.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
Todd Price
  • 2,650
  • 1
  • 18
  • 26