본문 바로가기
카테고리 없음

cors

by pishio 2025. 2. 11.

Cordova 앱에서 POST API 호출 시 CORS 오류가 발생하는 경우, Cordova 플러그인을 사용하여 Android 네이티브 코드에서 직접 API를 호출하면 CORS 문제를 우회할 수 있습니다. 이를 위해 cordova-plugin-advanced-http 플러그인을 사용할 수 있습니다.

1. cordova-plugin-advanced-http 플러그인 설치

이 플러그인은 네이티브 HTTP 요청을 사용하여 CORS 문제를 방지합니다.

cordova plugin add cordova-plugin-advanced-http

2. JavaScript 코드에서 네이티브 HTTP 요청 사용

설치 후, 다음과 같이 cordova.plugin.http 객체를 사용하여 API를 호출할 수 있습니다.

document.addEventListener("deviceready", function () {
  cordova.plugin.http.setDataSerializer("json"); // JSON 데이터 전송

  cordova.plugin.http.post(
    "https://example.com/api/data", // 요청할 API URL
    { key1: "value1", key2: "value2" }, // 요청 본문 (JSON)
    { "Content-Type": "application/json" }, // 헤더 설정
    function (response) {
      console.log("Success:", response.status, response.data);
    },
    function (error) {
      console.error("Error:", error.status, error.error);
    }
  );
});

3. 플러그인 사용 시 장점
• CORS 문제 해결 (네이티브에서 직접 요청하므로 브라우저의 보안 정책 영향을 받지 않음)
• JSON, URL-encoded, Multipart 등 다양한 데이터 형식 지원
• 네이티브 성능 활용 (기본 fetch나 XMLHttpRequest보다 빠를 수 있음)

4. 추가 설정 (Android 9 이상 대응 - Cleartext HTTP 허용)

Android 9(Pie) 이상에서는 기본적으로 HTTP 요청이 차단됩니다. HTTPS를 사용하지 않는 경우 AndroidManifest.xml 파일을 수정해야 합니다.
1. config.xml에 다음을 추가:

<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
    <application android:usesCleartextTraffic="true" />
</edit-config>


2. platforms/android/app/src/main/AndroidManifest.xml에 다음이 포함되어 있는지 확인:

<application
    android:usesCleartextTraffic="true">

이렇게 하면 CORS 문제 없이 Cordova Android 앱에서 네이티브 API 호출을 할 수 있습니다.
추가 설정이 필요하면 알려주세요!

댓글