Fix 302 ImageLoader caching problem on iOS

[hayeah]

• Fixes [Image] Can't display avatar with HTTP 301 #5616
• Bug RNPlay Demo: https://rnplay.org/apps/Eg2goQ

Test demo loads a Tumblr avatar image using a URL that 301 to a CDN. Try to edit and save the file to trigger image reloads.

Problem Description

The 302 image request succeeds the first time:

But it fails for subsequent loads. You should see:

- The first image is a 302, only succeeds to load the first time. - The second image in the column adds a nonce as request parameter to render caching ineffective (but still a 302), and the problem doesn't occur. - The last image is the canonical url location (200). # Analysis

Although NSURLSession handles redirect and caching properly, the RCTImageLoader checks the cache directly to see if an image url has cached response. Like so:

See:

react-native/Libraries/Image/RCTImageLoader.m

Line 373 in 9547a98

NSCachedURLResponse *cachedResponse = [_URLCache cachedResponseForRequest:request];

    NSCachedURLResponse *cachedResponse = [_URLCache cachedResponseForRequest:request];
    if (cachedResponse) {
      processResponse(cachedResponse.response, cachedResponse.data, nil);
      return;
    }

This is a problem because cachedResponseForRequest does not handle redirect. The returned response is a 302, which causes ImageLoading failure later on.

This PR changes this chunk of code to follow the redirect.

[ghost]

By analyzing the blame information on this pull request, we identified @nicklockwood and @ide to be potential reviewers.

[javache]

while (true) is a big code smell. I'd prefer it if we repeated the NSCachedURLResponse *cachedResponse = [_URLCache cachedResponseForRequest:request]; line instead and use that as the loop condition.

[javache]

Thanks for fixing this! The solution looks good but I'd restructure the loop a bit so it's easier to maintain.

[ghost]

@hayeah updated the pull request.

[hayeah]

@javache I rewrote the loop per your advice.

In Golang while(true) loop is much more common in the form of:

for {
  cond := ...
  if cond {
    return err;
  }

  if cond2 {
    break
  }
}

In this case there is just one loop condition, so probably better to be explicit in the loop structure. Thanks for the tip!

[javache]

style nit: while (cachedResponse) {

[ghost]

@hayeah updated the pull request.

[javache]

Last style nits, I promise :)

There shouldn't be a space between the : and the argument, so isKindOfClass:[NSHTTPURLResponse class]

[ghost]

@hayeah updated the pull request.

[ghost]

@hayeah updated the pull request.

[hayeah]

@javache If Location is nil, would now call the completion handler with error.

[javache]

@facebook-github-bot shipit

[ghost]

Thanks for importing. If you are an FB employee go to Phabricator to review.

[diogoca]

Hi @hayeah, do you know if this PR was merged? Or why was closed?
I'm still getting same error on 55.2v when trying to load external FB profile picture (http return 302).
Thanks.

[hayeah]

@diogoca I believe that this was merged a long time ago.