Why are my headers always giving an “Adapter operation failed” error?

Ember Data
1

Aloha! Today, I’m trying to add custom headers to each request to my backend.

Playing with my DS.RESTAdapter, I already tried:

  • The 3 headers: solutions suggested in the official guide.

  • The 2 ajax: approaches proposed around there.

  • And 2 jQuery workarounds (based on $.ajaxPrefilter and $.ajaxSetup) that I found there.

Until now, my only result was this very obscure “Adapter operation failed” error:

{
  details: "",
  status: 0,
  title: "The backend responded with an error"
}

I know that:

  • My backend behaves well and returns a 200 status (I tested sending the request via cURL).
  • Strangely, removing my adapter’s host setting allows the request to be sent, but obviously at the wrong URL.
  • My problem is not a CSP issue as I’m currently running both backend & frontend locally.

According to my debugging and to my Network Inspector tab, the AJAX request is just never sent (XHR.readyStatus is stuck at 0).

Has somebody already faced this?
Any help would be really lovely!

  • Ember 1.13.11
  • Ember Data 1.13.15
  • jQuery 1.11.3

EDIT: Magic minimal app reproducing the bug is out here!

Hope you’ll enjoy it! And because I love you so much, I also offered a demo API endpoint on my server. Details in the FM!

BONUS! Know what is the coolest thing to put in a clipboard?
git clone https://github.com/imbrou/ember-data-headers-demo.git

Thanks in advance (-:

2

This looks like a CORS issue. Are you sure you’re handling the OPTIONS pre-flight request correctly?

OPTIONS http://broubrou.olympe.in/util/stack/headers-demo/api/guys.php
XMLHttpRequest cannot load http://broubrou.olympe.in/util/stack/headers-demo/api/guys.php.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed
access. The response had HTTP status code 404.

(same thing happens locally if running on different ports)

1 Like
3

Solved !
1 000 thanks: I’ve been struggling on this issue for so long !

Effectively, my backend was not sending the correct CORS headers.

The tricky thing was that for an unknown reason, my version of Firefox (Developer Edition…) didn’t display the failing OPTIONS request in my Network Inspector at the point of my debugging. I thus had no debugging information at all there.

I could only observe the failing preflight using… Wireshark !

It may have been a bug solved in a Christmas update, as I can’t reproduce it today. Too bad…

Anyway, in desperation, I linked 3 screenshots:

  1. No-preflight example: no backend security (no “authorization” token).
  2. Working example: the “authorization” header is requested by client, and allowed by server in the response during the preflight.
  3. Failing example: the “authorization” header is requested by the client, BUT not allowed by the server.

Hope it helps, thanks again @wecc ! Can I reward you somehow ?