Api cors 오류

개발
1

안녕하세요 :person_bowing:
현재 서버와 통신시 API CORS 오류가 발생하고 있습니다.
서버 측에서는 도메인 전체 허용으로 설정되어 있다고 확인했는데, 여전히 문제가 지속되고 있습니다. 혹시 추가로 설정해야 하는 부분이 있을까요? 현재 react 웹뷰로 개발중입니다!

2

안녕하세요 :slight_smile:

  • https://<appName>.apps.tossmini.com : 실제 서비스 런칭 시 사용
  • https://<appName>.private-apps.tossmini.com : 콘솔 QR 테스트 시 사용

이 두개 도메인이 모두 허용된 것 맞을까요 ? 콘솔 QR 테스트시에는 어떤가요 ?
시뮬레이터 > 샌드박스 환경에서는 인증서 이슈로 오류가 발생할 수 있어요.

3

현재 모든 도메인을 허용하고 있음에도 불구하고, 안드로이드 실기기 WebView에서 API 요청이 Pending 상태로 멈추고 있습니다.
같은 코드로 웹에서 테스트할 때는 정상 통신되지만, WebView에서는 요청이 진행되지 않습니다 :sob:

4

음… :thinking:
어느 구간에서 문제가 발생하는지 체크가 필요할 것 같아요.
서버에 요청은 들어가는걸까요 ? http 혹은 QR 테스트로 토스앱 위에서 실행시켜도 동일한지 궁금해요.

5

서버 요청 자체는 정상적으로 들어가고 있습니다.
다만 API 서버의 Base URL이 https로 되어 있는데, 이 부분이 문제가 될 수 있을까요?

그리고 저희가 env를 dev와 prd를 나눠져있는데 , QR 테스트를 진행할 때는 prd 환경을 사용하는 것이 맞는지도 궁금합니다!

6

http 로컬 서버주소로 요청시 Pending상태로 멈춥니다..

export const mobileAxiosInstance = axios.create({
  baseURL: process.env.REACT_APP_MOBILE_API_URL,
  headers: {
    "Content-Type": "application/json",
  },
  timeout: 10000,
});


configuration.setAllowedOrigins(List.of("https://self-care.apps.tossmini.com", "https://self-care.private-apps.tossmini.com"));
configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"));
configuration.setAllowedHeaders(List.of("*"));

이렇게 사용중에있는데 웹뷰로 실기기 안드로이드 개발 환경에서도 API 통신이 정상적으로 이루어지는 게 맞을까요?:cry:

7

안녕하세요 :slightly_smiling_face:

api 서버 통신은 문제 원인 발견하여 해결했습니다!

QR 테스트 진행 시 환경에 대해 궁금한 점이 있습니다.

.env 파일을 dev와 prd로 나누어 관리하고 있는데, 빌드 후 QR 테스트를 진행할 때는 prd 환경에 연결되는 것이 맞을까요?

그리고 이를 실제 운영 환경과 동일하게 동작하는 staging 환경이라고 이해해도 될까요?

8

다행입니다 :slight_smile:
빌드 후 QR 로 테스트 하시는 것은 토스앱 위에서 실행되는거라, 운영 환경과 동일하게 동작하는 스테이징 환경으로 이해하셔도 될 것 같아요.

dev, prd 로 나누신건 바라보는 자체 서버 도메인을 나누신 것 맞을까요 ?
dev - 샌드박스앱
prd - 토스앱
이렇게 구분하셔도 될 것 같아요 :slight_smile:

9

넵 확인해주셔서 감사합니다!:person_bowing:

10

안녕하세요,

저희도 CORS 오류가 있는 거 같은데,

원인을 찾기가 힘드네요,

혹시 어떻게 해결하셨는지 공유해 주실 수 있으실까요?

감사합니다.

11

저희는 서버 내부 오류였습니다..!