CODEWITHSUNDEEP
react-nativefetchetag
waffl
waffl

Reputation: 5511

Fetch with 'If-None-Match': "etag" header always returning 200 in React Native app

I'm encountering a very strange issue in a react native app where a simple fetch with an etag is always returning a 200 rather than an expected 304:

const response = await fetch(url, {
  method: 'GET',
  headers: {
    'If-None-Match': etag
  },
});

where etag is something like "33a64df551425fcc55e4d42a148795d9f25f89d4"

When I make this request directly through something like Postman/Insomnia, it is working and I get the appropriate 304 response.

Inspecting the app in Reactotron, I can see the network request header seems to be correct:

Reactotron screenshot

If I copy the JSON request as cURL I get the following:

curl -H "if-none-match:"33a64df551425fcc55e4d42a148795d9f25f89d4"" https://url/to/api

With a slight modification to show only the headers:

curl -sD - -o /dev/null -H "if-none-match:"33a64df551425fcc55e4d42a148795d9f25f89d4"" https://url/to/api

Which also only returns a 200, but if I escape the quotes around the etag like so, it works:

curl -sD - -o /dev/null -H "if-none-match:\"33a64df551425fcc55e4d42a148795d9f25f89d4\"" https://url/to/api

I'm genuinely confused because I've tried all variants of:

'If-None-Match': etag
'If-None-Match': `"${etag}"`
'If-None-Match': `\"${etag}\"`
'If-None-Match': '"' + etag + '"'

to no avail, what am I doing wrong?

Putting the same fetch request into an html file and testing in the browser works with the expected 304 status.

Upvotes: 5

Views: 4597

Answers (1)

Louis St-Amour
Louis St-Amour

Reputation: 4135

Under the hood, React Native is using NSURLCache which returns a 200 even when it receives a 304 from upstream, at least from what I’ve read online. Have a look using Charles Web Proxy or another such proxy from the App Store and you’ll see the traffic over the network before it hits your app. Googling reveals a lot of edge cases around caching also, such as apparently not caching private responses by default.

Upvotes: 2

Related Questions