CORS 에러 (XMLHttpRequest, credentials mode, wildcard, Access-Control-Allow-Origin, 아파치 설정, Alias)

 

업무 중 발생한 CORS 에러의 원인과 해결방법에 대해 공유하려 합니다.

CORS 에러는 웹개발자라면 자주 접하는 에러이기에 도움이 되시길 바랍니다.

 

에러 내용

• 특정 도메인에서만 브라우저에서 API호출 시에 CORS 에러 발생
• 평소에 잘 동작하다가 특정 시점부터 계속해서 발생

 

원인 진단

• 개발자 도구 콘솔에 찍힌 에러 로그 확인했습니다.
  • 로그내용
    • Access to XMLHttpRequest at 'API경로' from origin '현재 사이트 URL' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
• API 파일에  'Access-Control-Allow-Origin'이 wildcard로 설정돼 있는지 확인했습니다.
  • origin의 url을 정확히 명시하고 있었습니다. 코드 상에는 이슈가 없었습니다.
• 아파치 설정파일을 확인했습니다. 아파치 설정파일에 'Access-Control-Allow-Origin'가 wildcard(*)로 명시돼 있는 것을 확인했습니다. 최근 신규 API 서버를 구성하였는데 이때 Access-Control-Allow-Origin 설정이 변경되었습니다.
  
  • API 파일의  'Access-Control-Allow-Origin'에 특정 origin을 명시했지만, 이것이 무시되고 아파치에 설정된 'Access-Control-Allow-Origin'인 wildcard(*)가 반환되었습니다.
• CORS 에러가 발생하는 도메인에서는 신규 API 서버 호출을 하고 있었습니다. CORS 에러가 발생하지 않는 도메인은 다른 API서버를 호출하고 있었습니다. 호출 서버는 다르지만 각각 서버 아파치 설정의 Alias를 통해 동일한 API파일을 호출합니다.

 

해결 방법 후보

• 방법 1
  • API 호출 서버 변경
    • 해당 API파일은 전체 서버에서 공용으로 사용하는 파일입니다.
    • 기존 서버가 아닌, 다른 서버에서도 특정 URL을 통해 해당 API 파일을 호출할 수 있습니다.
      • 아파치 설정에 Alias로 URL과 API파일이 위치하는 경로가 매핑되어 있습니다.
    • 변경할 서버의 아파치 설정에는 'Access-Control-Allow-Origin'가
    • 해당 방법을 채택하고 CORS 에러를 해결했습니다.
• 방법 2
  • XMLHttpRequest의 credentials mode를 해제
    • credentials mode는 개인정보와 같은 사용자의 민감한 정보를 호출 인자로 담을 때 보안을 위해 사용됩니다. 해당 API 호출 인자에 담기는 정보는 기준에 따라 민감할 수도 아닐 수도 있었습니다. 보안적인 요소는 보수적으로 가는 것이 좋다고 생각했고, 이전 작업자가 credentials mode로 작성된 이유가 있다고 생각되어 유지하는 것으로 결정했습니다. 
• 방법 3
  • API파일이 있는 아파치 서버의 'Access-Control-Allow-Origin' 설정을 변경
    
    • 아파치 설정파일의 'Access-Control-Allow-Origin'를 이전 상태로 되돌렸을 때 관련 사항을 조사했습니다.
    • 하지만 다른 서비스의 작업에 필요로 하여 'Access-Control-Allow-Origin'가
    • 다른 서비스의 작업이 현재 사내에서 중요도가 높고, 이것이 유일한 방법인 것은 아니라 채택하지 않았습니다.

 

결론

• 신규 서버를 구성할 때 예상치 못한 에러가 발생할 수 있으니 꼼꼼한 테스트가 필요합니다.
• 개별 API파일에 'Access-Control-Allow-Origin'이 설정돼 있더라도, 경우에 따라 아파치 설정의 'Access-Control-Allow-Origin'로 덮어 쓰일 수도 있습니다.
• XMLHttpRequest가 credentials mode일 경우 서버에서는 필수적으로 'Access-Control-Allow-Origin'에 특정 Origin을 명시해야 합니다.