blob: 55ad491197fe2ba27b9df506c59ee606cb9dd243 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: CORS errors
slug: Web/HTTP/CORS/Errors
tags:
- CORS
- Errors
- HTTP
- HTTPS
- Messages
- NeedsTranslation
- Same-origin
- Security
- TopicStub
- console
- troubleshooting
translation_of: Web/HTTP/CORS/Errors
---
<div>{{HTTPSidebar}}</div>
<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">교차 출처 자원 공유</a> ({{Glossary("CORS")}})는 서버가 same
origin 정책(<a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>)을 완화할 수 있게 해 주는 표준입니다. 이는 일부
교차 출처 요청은 명시적으로 허용하고 다른 요청은 거부하는 데 사용됩니다. </span> 예를 들어서, 어떤 사이트가 embeddable service를 제공하는 경우, 특정 제한을
완화하는 것이 필요할 수 있습니다. CORS 설정을 세팅하는 것은 그리 쉬운 일이 아니며, 도전일 수 있습니다. 이 페이지에서는, 몇 가지 일반적인 CORS 에러 메시지를 소개하고 그에 맞는 해결법을
알아보겠습니다.</p>
<p>만약 CORS 설정이 제대로 세팅되어 있지 않다면, 브라우저 콘솔에는 다음과 같은 메시지가 표시될 것입니다:
<code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code>
이 메시지는 CORS 보안 규칙 위반으로 인해 요청이 차단되었음을 알려줍니다. 이것은 꼭 설정 실수라고 볼 수는 없습니다.
사실은 해당 요청이 유저 쪽의 웹 어플리케이션과 외부 서비스에 의해 거부당했을 수 있습니다. 하지만 만약 엔드포인트가 사용 가능한 걸로 확인된다면, 약간의 디버깅이 필요 할 수 있습니다.
</p>
<h2 id="Identifying_the_issue">이슈 파악하기</h2>
<p>CORS 설정 이슈를 근본적으로 이해하려면 어떤 요청이 문제이고 왜 문제인지를 파악할 필요가 있습니다. 다음 단계들을 따라하면 도움이 될 것입니다.</p>
<ol>
<li>웹사이트나 웹앱으로 이동하여 <a href="/en-US/docs/Tools">Developer Tools</a>을 여세요.</li>
<li>실패한 요청을 재현하고 나서 CORS 위반 에러 메시지가 떴다면 <a href="/en-US/docs/Tools/Web_Console">console</a>을 확인하세요. 메시지는 다음과 같을 겁니다:</li>
</ol>
<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png" /></p>
<p>에러 메시지 내용은 다음과 비슷할 수 있습니다. </p>
<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at <em>https://some-url-here</em>. (<em>Reason:
additional information here</em>).</span></span></span></pre>
<div class="note">
<p><span class="message-body-wrapper"><span class="message-flex-body"><span
class="devtools-monospace message-body"><strong>Note:</strong>보안상의 이유로, CORS 요청에서 정확히 무엇을 위반했는지에 대한 사항은 <em>자바스크립트 코드상에서 사용할 수 없습니다.</em> 코드상에서 알 수 있는 것은 에러가 발생했다는 것 뿐입니다.
정확히 무엇이 잘못됐는지 파악하려면 브라우저 콘솔을 살피는 수밖에 없습니다.</span></span></span></p>
</div>
<h2 id="CORS_error_messages">CORS 에러 메시지</h2>
<p>Firefox 콘솔은 CORS에 의해 요청이 실패했을 때 메시지를 출력합니다. 에러내용의 일부분은 "Reason"에 관한 메시지로서 무엇이 잘못되었는지에 대한 힌트를 제공합니다.
"Reason" 메시지들이 아래에 정리되어 있으니 더 자세한 에러에 대한 설명과 솔루션을 보고 싶으시다면 링크로 이동하세요.</p>
<ul>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be
added</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect
not allowed</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header
‘Access-Control-Allow-Origin’ missing</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header
‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the
CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header
‘Access-Control-Allow-Methods’</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header
‘Access-Control-Allow-Credentials’</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not
succeed</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header
‘Access-Control-Allow-Methods’</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header
‘Access-Control-Allow-Headers’</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS
header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li>
<li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header
‘Access-Control-Allow-Origin’ not allowed</a></li>
</ul>
<h2 id="See_also">더보기</h2>
<ul>
<li>Glossary: {{Glossary("CORS")}}</li>
<li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
<li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li>
<li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li>
<li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li>
<li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li>
</ul>
|
