[오픈소스] svelte + capacitor 에서 https 로 post로 값넘기기
svelte + capacitor 에서 https 로 post로 값넘기기
우선
ajax 를 주로 사용하다보니, javascript 에서 비동기 통신 부분의 많음 변화가 있다는 것을 알게되었습니다.
jquery 에서 ajax 만 주구 장창 사용하다보니, ..
fatch가 나온지도 모르고 있었네요.
그래서 fatch 를 이용해서 쉽게 get 은 받아오는데,...
문제는 post 로 값을 넘기려하니,
https 즉, ssl 보안이 결려서
데이터를 보내고 받지를 못한다는 것을 개발했던 ssl 이 적용된 사이트들을 테스트 해보고야 알게되었습니다.
svelte 예제로도 이부분이 나오지 않고 있어서,
아직 svelte 로 앱을 만드는 경우는 드물어서 그런지.. fetch 를 이용한 대안은 없는 것 같네요, 아직 발견못했을 수도 있고요.
아무튼
capacitor 에서 https 를 처리하는 방식으로 , cordova plugin 을 사용해서 처리하는 방식을 찾았네요.
cordova-plugin-advanced-http 라는 플러그인입니다.
설치는
npm install cordova-plugin-advanced-http
npx cap sync
이렇게 하면
package.json 파일의
"dependencies": {
...
"cordova-plugin-advanced-http": "^3.1.0",
"cordova-plugin-file": "^6.0.2",
...
}
cordova-plugin-file 플러그인도 같이 등록되면서 설치가 됩니다.
실제 npm install 로 플러그인이 설치되는 곳은
node_modeul 폴더 안인데,
npx cap sync 이렇게 명령어를 추가해주면,
추가 해놓은 안드로이드나 ios 에도 추가 됩니다.
사용하려는 곳에서는
javascript 를 실행하는 곳에서
cordova.plugin.http.post() 를 이용하면, 실행됩니다.
아래는 예제..
cordova.plugin.http.post("https://요청하는 주소", {
phone: phonenum,
chks: $params
}, {
Authorization: 'OAuth2: token'
}, function (response) {
// prints 200
//console.log(response.status);
try {
response.data = JSON.parse(response.data);
// success
// 전달이 성공하면 response.data 로 결과를 받게 됩니다.
console.log(response.data);
} catch (e) {
// error
console.error('JSON parsing error');
}
}, function (response) {
// prints 403
console.log(response.status);
//prints Permission denied
console.log(response.error);
});
출처
출처를 들어가 보면,
좀더 다양한 방식 예들들면 파일 전송 등도 설명되어 있습니다.
서버측에 CORS 서로다른 출처에서 접근 제어하는 설정하느라
Access-Control-Allow-Origin: *
이런 설정 안해도 잘 달라 붙고 잘 보내고 잘 받아옵니다.
capacitor 를이용해서 앱만들때 https 로 통신할때는 fetch 로 안되니까 고생하지 말고
cordova-plugin-advanced-http 로 쓰세요.
