allow "*"를 했는데도 CORS 에러 뜰 때, 새로고침 해야 CORS 에러 안 뜰 때

[node js, express js]

 

CORS 에러를 마주했다.

예전에 경험한 적이 있던 흔한 오류여서 대수롭지 않게 생각했지만 그 놈이 나를 이틀동안이나 괴롭혔다.

 

allowedOrigins를 명시해주어 CORS 에러를 해결했다.

그런데 다시 사이트에 접속해보니 여전히 CORS 에러가 뜨는 것이었다.

아 도대체 뭐가 잘못된거야 ㅡㅡ 하면서 새로고침을 하니까 그 때는 또 오류 없이 잘 실행되는 것..

그 상태로 하루를 꼬박 보냈다.

 

아니 안될거면 안되고, 될거면 되던가 새로고침 하면 되고 처음에 안되는 이유는 도대체 뭐야!!! 

라고 생각하다가 결국 우아한 테크 유튜브에서 COS에러 공부까지 하게 된다.

 

그리고 얻은 건 원래 알고 있었던 지식의 강화 ㅋ

preflight를 보내고, 응답 받으면서 SOP를 실천한다.

하지만 preflight에 들어가는 요소들은 브라우저가 만든다.

이게 오락가락하는 것은 브라우저 탓인것이다. 

 

생각이 여기까지 미친 찰나에 친구가 검색해서 알려줬다.

 

wildcard를 쓰면 브라우저에서 블락한단다.

그 소리를 듣고 내가 구글링했을 때는 와일드카드와 credentials:true 를 wildcard와 못 쓴다는 것밖에 보지 못했지만

내 코드가 그렇게 돼있었단 걸 깨닫고 고치게 된다.

오늘 아침에 보니 이렇게 떡 하니 돼있는 것이 아닌가? ㅋㅋ

app.use(
  cors({
    credentials: true,
    origin: "*",
  })
);

credentials와 wildcard 설정을 같이 못한다는 것은 어제 구글링할 때 봤던 것이지만 무시하고 내가 그렇게 코드를 짰었나보다.

 

그래서 origin에 허용할 origin들의 배열을 적어주었다.

그러니까 언제 그랬냐는듯이 말끔하게 해결!

 

나는 credential이 왜 필요한지 몰라서 혹시 에러가 날까봐 안넣었었다. 이렇게 말이다.

app.use(
  cors({
    origin: allowedOrigins,
  })
);

 

근데 이렇게 설정했을 때 새로고침해야 CORS 에러가 안 뜨는 상황이 벌어졌었다.

아마 wildcard랑 같이 쓰면 credentials: true 설정이 안 먹나 보다.

 

있어야 할 credentials 설정이 없이 계속 요청하면 서버가 오락가락 하는건지 브라우저가 오락가락 하는건지 모르겠지만 

결국 이렇게 바꾸니 문제를 해결할 수 있었다.

 

app.use(
  cors({
    credentials: true,
    origin: allowedOrigins,
  })
);

 

그러니 잘 모르면 이것저것 맞춰보면서 다트처럼 코딩하지 말자..

바빠서 그랬겠지만서도 조금만 시간을 들이면 30분 내에는 배울 수 있는 것이었다.