react / react/react-native

[iOS] Authorization header dropped when making HTTP requests that redirect

オープン
#34,627 コメント 22 件 リアクション 7 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Needs: Attention
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

Description

I am requesting a URL of API service which responds with status code 307 (redirect) on success and a URL location in response Headers. This is protected API and needs Authorization header for it to be fulfilled successfully. The problem I am facing is that the Authorization header is not appended to the redirected URL, it is only appended to the original call, and therefore the redirected URL call fails with status 401. This works perfectly fine in Postman but is not working with Axios. This works fine in ReactJS web app and React Native mobile on Android OS, too. The problem is only on iOS platform. I have tried on a bare minimum RN app v.69.5 and v0.67.4 using axios and fetch API and the results on iOS platform are the same, so it clearly is problem on iOS platform with React Native. There is one more strange behaviour, it works fine on iOS, too, if I connect the app with react-native-debugger and inspect the network calls. So the problem is only on iOS platform with chrome debugger disabled. I have tried using maxRedirects: 0 prop and beforeRedirect callback on axios but to no avail.

Version

[0.67.4, 0.69.5]

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 12.4
CPU: (8) arm64 Apple M1
Memory: 313.20 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
npm: 8.1.4 - ~/.nvm/versions/node/v16.13.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7784292
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 12.0.2 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.4 => 0.67.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce
  1. npx react-native init sampleapp --version 0.69.5
  2. yarn add axios query-string
  3. Add the imports on top:
import axios from 'axios';
import queryString from 'query-string';
  1. Place the following snippet in App.js file:
const apply = async () => {
    const url = `https://${baseUrl}/coupons/apply`;
    const token = 'token';
    const ins = axios.create({headers: {Authorization: token}});
    const data = {
      coupon: {
        name: 'SufrExelBL',
      },
      ],
    };
    const params = {
      calculateTotal: true,
    };
    const headers = {
      Authorization: token,
    };
    try {
      const res = await ins.put(url, data, {
        params,
        paramsSerializer: function (params) {
          return queryString.stringify(params);
        },
        headers,
      });
      console.log('SUCCESSSSSSSSSSSSSS', res);
    } catch (e) {
      console.log('ERORROOOOOORRRRRRRr', e);
    }
  };
  useEffect(() => {
    apply();
  }, []);
  1. Note the catch block got executed with error 401 returned
Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/mhWvbpbX6

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

React Native 0.69.5 と提供された Snack を使用して App.js の再現から始め、次に Chrome デバッガーの有無による iOS の動作を比較します。iOS の fetch/HTTP リダイレクト経路を追跡し、307 リダイレクトによって Authorization ヘッダーが保持され、リダイレクト後のリクエストが 401 を返さなくなることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
ios, react-native
領域
mobile, networking
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
48/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。