CORS errors

이슈 파악하기

CORS 설정 이슈를 근본적으로 이해하려면 어떤 요청이 문제이고 왜 문제인지를 파악할 필요가 있습니다. 다음 단계들을 따라하면 도움이 될 것입니다.

1. 웹사이트나 웹앱으로 이동하여 Developer Tools을 여세요.
2. 실패한 요청을 재현하고 나서 CORS 위반 에러 메시지가 떴다면 console을 확인하세요. 메시지는 다음과 같을 겁니다:

에러 메시지 내용은 다음과 비슷할 수 있습니다.

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://some-url-here. (Reason:
additional information here).

참고: **Note:**보안상의 이유로, CORS 요청에서 정확히 무엇을 위반했는지에 대한 사항은 JavaScript 코드상에서 사용할 수 없습니다. 코드상에서 알 수 있는 것은 에러가 발생했다는 것 뿐입니다. 정확히 무엇이 잘못됐는지 파악하려면 브라우저 콘솔을 살피는 수밖에 없습니다.

CORS 에러 메시지

Firefox 콘솔은 CORS에 의해 요청이 실패했을 때 메시지를 출력합니다. 에러내용의 일부분은 "Reason"에 관한 메시지로서 무엇이 잘못되었는지에 대한 힌트를 제공합니다. "Reason" 메시지들이 아래에 정리되어 있으니 더 자세한 에러에 대한 설명과 솔루션을 보고 싶으시다면 링크로 이동하세요.

• Reason: CORS disabled
• Reason: CORS request did not succeed
• Reason: CORS header 'Origin' cannot be added
• Reason: CORS request external redirect not allowed
• Reason: CORS request not http
• Reason: CORS header 'Access-Control-Allow-Origin' missing
• Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz'
• Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*'
• Reason: Did not find method in CORS header 'Access-Control-Allow-Methods'
• Reason: expected 'true' in CORS header 'Access-Control-Allow-Credentials'
• Reason: CORS preflight channel did not succeed
• Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Methods'
• Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Headers'
• Reason: missing token 'xyz' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel
• Reason: Multiple CORS header 'Access-Control-Allow-Origin' not allowed

더보기

• Glossary: CORS
• CORS introduction
• Server-side CORS settings
• CORS enabled image
• CORS settings attributes
• https://www.test-cors.org – page to test CORS requests