在测试环境中，fetch从不调用.then或.catch

Question

我有以下网页组件：

import React, { useCallback, useState } from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import { useFocusEffect } from '@react-navigation/native'
import styled from 'styled-components/native'
import { useEduConnect, useEduConnectClient } from '../../../IdCheckContext'

import { EduConnectErrorBoundary } from '../../../errors/eduConnect/EduConnectErrorBoundary'
import { ErrorTrigger } from '../../../errors/ErrorTrigger'
import { EduConnectError, EduConnectErrors } from '../../../errors/eduConnect'
import { PageWithHeader } from '../../layout/PageWithHeader'
import { IdCardMagnifyingGlassIcon } from '../../icons/IdCardMagnifyingGlass'
import { getSpacing } from '../../../ui/utils'
import { ButtonPrimary, Spacer, Typo } from '../../../ui/components'
import { ColorsEnum } from '../../../theme/colors'

export const EduConnectForm = () => {
  const eduConnectClient = useEduConnectClient()
  const allowEduConnect = useEduConnect()
  const [error, setError] = useState<EduConnectError | null>(allowEduConnect ? null : new EduConnectError(EduConnectErrors.unavailable))

  const checkIfEduConnectIsAvailable = useCallback(() => {
    if (allowEduConnect === false) {
      setError(new EduConnectError(EduConnectErrors.unavailable))
    }
  }, [allowEduConnect])

  const openEduConnect = useCallback(() => {
    function setWebView() {
      eduConnectClient?.getAccessToken().then((value) => {
        console.log('value', value, `${eduConnectClient.getLoginUrl()}?redirect=false`)
        const request: RequestInit = {
          headers: {
            Authorization: `Bearer ${value}`,
          } as unknown as Record<string, string>,
          mode: 'cors',
          credentials: 'include',
        }
        fetch(`${eduConnectClient.getLoginUrl()}?redirect=false`, request)
          .catch((err) => {
            console.log(1)
            console.error(err)
            setError(err)
          }) // should be 401 or something, will display default error
          .then((response) => {
            console.log(JSON.stringify(response))
            // @ts-ignore fix response typing
            if ('status' in response && response.status === 200) {
              const finalURL = response?.headers?.get('educonnect-redirect')
              if (finalURL) {
                globalThis.window.open(finalURL, '_blank')
              }
            }
          })
      })
        .catch((err) => {
          console.log(1)
          console.error(err)
          setError(err)
        })
    }
    setWebView()
  }, [eduConnectClient])

  useFocusEffect(
    useCallback(() => {
      openEduConnect()
      checkIfEduConnectIsAvailable()
    }, [checkIfEduConnectIsAvailable, openEduConnect])
  )

  if (error) {
    throw error
  }

  return (
    <ErrorBoundary FallbackComponent={EduConnectErrorBoundary}>
      <PageWithHeader
        title="Mon identité"
        scrollChildren={
          <>
            <Center>
              <IdCardMagnifyingGlassIcon size={getSpacing(47)} />
            </Center>

            <Typo.ButtonText color={ColorsEnum.GREY_DARK}>{`Identification`}</Typo.ButtonText>
            <Spacer.Column numberOfSpaces={4} />

            <Typo.Body color={ColorsEnum.GREY_DARK}>
              {`Pour procéder à ton identification, nous allons te demander de te connecter à ÉduConnect. Muni toi de ton identifiant et de ton mot de passe ÉduConnect. Dès que tu as bien complété le parcours, reviens sur ce site pour terminer ton inscription et découvrir toutes les offres du pass Culture !`}
            </Typo.Body>

            <Spacer.Column numberOfSpaces={8} />
          </>
        }
        bottomChildren={
          <ButtonPrimary
            title={`Ouvrir un onglet ÉduConnect`}
            onPress={openEduConnect}
          />
        }
      />
      <ErrorTrigger error={error} />
    </ErrorBoundary>
  )
}


const Center = styled.View({
  alignSelf: 'center',
})

在本地，fetch请求成功，并打开一个新选项卡。在测试环境中，它从不调用.catch或.then。我想至少给两个人打个电话。

这是我在testing环境中的network选项卡：

​

​

这是testing环境中的console developer选项卡：

​

​

有什么线索吗？

Answer 1

这是由于缺少必要的Access-Control-Expose-Headers，以使客户端能够读取头部以防止XSS攻击：

为了使客户端能够访问其他标头，服务器必须使用Access-Control-Expose-Headers头列出它们。

mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers