All fetch() requests fail with TypeMismatchError

Fixed Issue #8546263

Details

Author
Martin W.
Created
Aug 19, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Reports
Reported by 6 people

Sign in to watch or report this issue.

Steps to reproduce

Any requests I make using fetch() fail with a TypeMismatchError. The URL doesn’t matter, options don’t matter, same-origin doesn’t matter, and HTTP vs. HTTPS doesn’t matter (though making a non-HTTPS request of any kind also outputs a “HTTPS security is compromised by …” message). I did see some similar issues posted, but they were more limited in scope. fetch() simply doesn’t work at all for me.

fetch('http://anything', { /* whatever */ }).catch(e => console.error(e))

Versions:
Microsoft Edge 38.14393.0.0
Microsoft EdgeHTML 14.14393

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

    • Thank you for your feedback on Edge.

      Whenever I use the fetch code sample here:
      https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/performance/fetch-API/

      And the one you provided I do not receive a TypeMismatchError, but I am testing with builds 14393.1, 14901.1000, and higher. Depending on exactly what you are trying, you can use this API Catalog in order to determine what Edge supports compared to other browsers:
      https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/?q=specName%3Awhatwg-fetch

      Also, you might want to check the about:flags section and make sure that you have enabled the use of the Fetch API in there as well. Hope this helps you in some manner. The Fetch API has been enabled in Edge since build 14342 and higher, according to this page:
      https://developer.microsoft.com/en-us/microsoft-edge/platform/status/fetchapi/?filter=f3f0000bf&search=fetc

      All the best,

      The MS Edge Team

    • Microsoft Edge Team

      Changed Status to “Not reproducible”

    • I am receiving exactly the same error. Did you find any solution / workaround?
      I have the same browser version.

      Versions:
      Microsoft Edge 38.14393.0.0
      Microsoft EdgeHTML 14.14393

    • I have the exact same problem as Luca T. with the same version.

    • I tried to reproduce this as well and was unable. I tried both on RS1 14.14393 and on a later build; same output as Chrome/Firefox.

      Here’s my test case: https://gist.github.com/nolanlawson/54d29e82036bed5410adf9767d8cc64a

    • I get this if I submit a body on a get request (even if it’s null). i.e.

      fetch('/api/status', {method: 'get'}).then(console.log).catch(console.log); //works
      fetch('/api/status', {method: 'get', body: 'taco'}).then(console.log).catch(console.log); //fails
      fetch('/api/status', {method: 'get', body: null}).then(console.log).catch(console.log); //fails
      fetch('/api/status', {method: 'get', body: undefined}).then(console.log).catch(console.log); //works
      

      This may or may not help your particular use case.

      My two cents, Edge should give you a readable error message (“body is not allowed on GET requests”) and should treat null the same as undefined, like other browsers seem to.

    • I ran into this same issue and found that it was caused by Edge not accepting an object literal for headers - you have to use new Headers(headersObj). The reason this bit us was that it seems other browsers and the polyfill we use are more liberal, and will automatically convert objects to Headers where possible.

    • Quick update on the immediately above message. It turns out that the problem was not the use of an object literal rather than a Headers instance - in fact, the underlying issue was that we were specifying some empty string headers in our object. After stripping these, an object literal worked fine.

    • The biggest takeaway for me from this issue is that the error messages generated by this API are not sufficiently specific for them to be useful in diagnosing errors. Throughout, I received generic TypeMismatchException errors - a human-readable message in these errors would have been invaluable.

    • I am having a very similar issue. When using fetch in Edge and the server responds with a 401 (haven’t tried other responses) the promise doesn’t resolve or reject, rather it throws TypeMismatchError. This makes it impossible to retry or to call another API to get authentication before retrying the 401’ed endpoint. I think this is a very common use-case.

      I’m using:
      Microsoft Edge 38.14393.0.0
      Microsoft EdgeHTML 14.14393

      Here is a test case:
      https://gist.github.com/spirift/0a210795e92589a739cd143bb5605082

    • Tagging the subject as ‘NON REPRODUCIBLE’ is a bit of an oversight.

      It is certainly affeecting many people:

      https://github.com/aurelia/fetch-client/issues/81
      https://github.com/github/fetch/issues/391
      https://www.reddit.com/r/webdev/comments/57ii4f/psa_edge_14_ships_a_broken_windowfetch/

      And, apparently, hasn’t been fixed since.

      I advise anyone experiencing the problem to go with solutions described in all the links provided: while still applying polyfill for Chrome and Firefox, completely remove window.fetch from Edge window context upon browser detection. It is far better than using this extremely buggy fetch API implementation.

    • I can confirm that this is still a present issue as of 5 April 2017. We received this exception from approximately 30% of our users using Edge, had to roll back, and proceeded with the standard "if edge, delete window.fetch and use a polyfill instead".

      We never saw it in our own testing, and we have not been able to identify any common denominator among the affected users. We were able to use admin account takeovers on these specific users to verify that it was happening, so it appeared, upon inspection, to be unrelated directly to and specific. For example, a takeover of user “A” did not experience this issue, but a takeover of user “B” using the exact same Edge application threw this exception.

    • This fixed the type mismatch for me:
      old situation:

      var fetchObject = {
                      method : method || (body ? "Post" : "Get"),
                      body : body ? JSON.stringify(body) : null,
                      headers : {
                          'Accept': 'application/json',
                          'Content-Type': 'application/json; charset=utf-8',
                          'Client_id' : oidcConfig.userManagerSettings.client_id
                      }
                  };
      

      changing it to:

      var fetchObject = {
                      method : method || (body ? "Post" : "Get"),
                      body : body ? JSON.stringify(body) : undefined,
                      headers : {
                          'Accept': 'application/json',
                          'Content-Type': 'application/json; charset=utf-8',
                          'Client_id' : oidcConfig.userManagerSettings.client_id
                      }
                  };
      

      did the trick, If I don’t have a body, I used to use null as a body (which works fine on all other browsers), but edge wants me to put undefined there …

    • Microsoft Edge Team

      Changed Assigned To to “Brandon M.”

      Changed Status from “Not reproducible”

      Changed Status to “Fixed”

      Changed Assigned To to “Scott L.”

      Changed Status from “Fixed”

      Changed Status to “Fixed”

    • This has been fixed in the Creators Update (Edge 15.15063).

    You need to sign in to your Microsoft account to add a comment.

    Sign in