SyntaxError: Unexpected token in JSON at position 0

Question

I was getting this problem while accessing a REST service delivered by .Net WCF from a javascript node module using whatwg-fetch npm.

Note that the error-message above refers to an unexpected token that seems like whitespace.

As I could not figure out what this was I spent a lot of time considering other possible esoteric issues, like CORS, authentication, mixing up Promises from the fetch API++.

Answer 1

The cause of this was that the WCF REST service was creating the response via this call:

return WebOperationContext.Current.CreateTextResponse(
    json, 
    "application/json; charset=utf-8", 
    Encoding.UTF8
);

Turns out that when Microsoft implemented the Encoding.UTF8 encoding they chose to make it prepend the json string with an UTF BOM marker. The result is that the JSON opening brace has three characters in front of it: 0xEF , 0xBB , 0xBF . These look like this  when viewed in ISO-8859-1 or CP1252.

In this case I really should have trusted the error-message, but just the day before I started adding authentication I got reports back from others saying that the REST service was indeed working. I then had started to add the so far missing tests - while also adding authentication. It was at this stage I realized that all tests failed. And - backtracking didn't really help...

As a side-note: It seems that when the code runs in the browser it is more forgiving in regards to the BOM markers. When running the tests in node however it seems to be a lot more picky...

The solution was to force BOM marker off for the encoding, like this:

// Note, false to avoid BOM marker which breaks some clients not expecting BOM for utf-8
var utf8 = new UTF8Encoding(false);
return WebOperationContext.Current.CreateTextResponse(
    json, 
    "application/json; charset=utf-8",
    utf8
);