개발 블로깅/오늘의 TIL

[2019.06.25] PostMan 사용 시 주의사항! (API 요청 시 PostMan에서는 잘 되는데, 웹 브라우저에서 호출 시 안되는 현상)

Hello이뇽 2019. 6. 25. 12:16

 

출처 : POSTMAN 사이트

저번에도 위 제목과 같은 문제가 하나 있어서 TIL로 썼었다.

https://helloinyong.tistory.com/129

 

[2019.06.04] 오늘의 TIL - passport deserializeUser 호출이 안되는 문제(postman은 정상작동하고 브라우저에서는 안되는 문제)

어제 밤새 꽁꽁 싸매던 문제가 하나 있었다. passport.serializeUser(async function(user, done) { done(null, user); }); passport.deserializeUser(function(user, done) { done(null, user); }); passport.use..

helloinyong.tistory.com

passport에서 cors 때문에 문제가 있었던 것 때문에 블로깅을 했었는데, 결국 마지막에도 문제는 해결했지만 여전히 postman에서만 잘 되었던 건지는 알 수가 없었다.

 

그런데 Serverless Lambda에서 이미지 Resizing 작업 중에 이와 유사한 문제가 발생했던 것.😭

 

# 우선 cors에 대한 개념을 모른다면 아래 링크 참조

https://helloinyong.tistory.com/104

 

[2019.05.05] CORS...너는 대체 누구니..?

CORS(Cross Origin Resource Sharing)란 브라우저의 현재 웹 페이지에서 다른 페이지에 있는 자원(Resource)을 뜻한다.

위 코드와 같이, 현재 페이지에서 다..

helloinyong.tistory.com


# 요청에 대한 응답을 보내는 부분

let response = {
    statusCode: 200,
    body: JSON.stringify(data),
    isBase64Encoded: false
 };
 callback(null, response);

 

response라는 object 안에 응답 상태 코드, body에 응답 데이터를 넣고 callback 두번째 인자에 넣으면 응답을 보낸다.

그런데, postman으로 보내면 호출이 잘 되는데, 호출 부분을 클라이언트로 시행하면 cors 에러가 남...

 

# 문제 원인 분석

위 코드에서는 응답 값으로 cors허용을 지정해주지 않았다. 그래서 혹시나 해서 응답에 cors 허용하는 코드를 넣어보았다.

 

let response = {
   statusCode: 200,
   headers: {
     "Access-Control-Allow-Origin": "*", // Required for CORS support to work
     "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS
   },
   isBase64Encoded: false
};
callback(null, response);

 

이렇게 하고 클라이언트에서 요청을 해보니 cors 에러가 뜨지 않았다.

 

그러면 클라이언트에서 처음 요청을 보낼 때, Options 요청에 응답을 하지 못해서 cors 에러가 뜬 것이다.

postman에서는 cors응답을 처리해주지 않아도 응답이 왔었다.

 

그렇다....

PostMan은 OPTIONS 요청은 하지 않고 바로 해당 Method 요청 한번만 보낸다.

 

PostMan 사용 시 주의해야 할 사항이다. 

PostMan에서는 Method 요청 중에 OPTIONS가 따로 있다.

반응형