오류 기록 (외부API연동시 options Method 허용 체크)

어어어어어이없었던 실수를 한 경험

 

외부 API를 연동하는데 postman에서는 잘되는데 웹에 연동을 하면 500Error가 떨어져 버림...

headers 값에 'user-token'만 넣고 axios로 보내는 로직이라 아주아주 간단한 거였음

why? 

500Error라서 우리 잘못은 아니라 확신을 했는데 연동사에서 계속 우리가 잘못보내고 있는게 아니냐고 의심? ㅎ 해서 나도 열심히 테스트를 진행 했었다.

근데 뭔가 요청 내용이 이상함, user-token값을 넣었는데 보이지도 않고, 내가 알던 요청 헤더 정보가 아녀.. 

 

그래서 로컬로 실행해서 테스트를 해봄, 우리는 셋탑 단말 위에 브라우저를 띄우는 형태라 뭔가 다를 수도 있다고 생각했다.

 

요청 내용을 보니까 달라요... 왜죠..? CORS가 나긴하지만 아래처럼 토큰값이 보여야 하는데 안보이는 겁니다.........

처음에는 axios를 너무 오래된거 써서 그런 문제인가? 로컬은 vue로 테스트를 해본거고 그 위에거는 옛~날 소스인 관계로 일반 바닐라 자바스크립트 형태이기때문, 그리고 axios도 min.js다운받아서 아주 예전 버전의 axios이라서 의심을 조금 했다

 

그러던 와중 curl명령어 줄수있냐는 요청에 뽑아보았는데, 뭔가 요청내용이 너무너무너무 다르다는걸 깨닫게 되었음

 

뒷 내용도 엄청 다르지만 앞에 보이는건 Method요청이 다른것!!!! 

내가 사용하는 웹뷰 브라우저는 OPTIONS 로 Method 사용 가능여부를 체크 한 뒤 GET/POST...등등 메소드를 보내는 방식으로 사용하는 것 같다.

타켓 서버에서 OPTIONS 메소드를 허용하지 않는다면 생길수도 있는 문제며, 암튼 이건 OPTIONS메소드 문제로 외부서버쪽에 수정 요청을 드렸다.

아래 보면 'user-token' 도 보내지도 않는걸 확인했다.

 

이틀동안 삽질만 하다 발견한 것이였습니댜.. 

//options check
curl "testest" -X OPTIONS -H "Access-Control-Request-Method: GET" -H xxx......

curl 'xxxxxx' \
  -X 'POST' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7' \
  -H 'Connection: keep-alive' \
  -H 'Content-Length: 0' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -H 'Origin: http://localhost:8081' \
  -H 'Referer: http://localhost:8081/main' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36' \
  -H 'sec-ch-ua: ".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'user-token: xxxxx..........' \
  --compressed

---

결론!!

메소드 요청을 보낼 때 Network탭에서 어떤 Method요청을 보내는지 확인해보자..... 

options method 문제일 수 있다고 생각해보자~