files/zh-cn/web/http/cors/errors/index.html


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

---
title: CORS errors
slug: Web/HTTP/CORS/Errors
translation_of: Web/HTTP/CORS/Errors
---
<div>
<p> </p>
</div>

<div> </div>

<div class="hidden">
<p class="syntaxbox"><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) 是一种允许服务器放宽同源策略的标准。 这用于明确允许一些跨源请求，同时拒绝其他请求。 例如，如果站点提供外界嵌入的服务，则可能需要放宽同源策略（<a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>）。 设置这样的CORS配置并不一定容易，并且可能存在一些挑战。 在这些页面中，我们将研究一些常见的CORS错误消息以及如何解决它们。</span></p>
</div>

<p>如果未正确设置CORS配置，浏览器控制台将显示错误，例如<code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"（</code>跨源请求已阻止：同源策略禁止在某些站点上读取远程资源”），表示请求因违反CORS安全性而被阻止规则。 但这可能不一定是设置错误。 因为用户的Web应用程序和远程外部服务可能故意禁止该请求。如果要使端点可用，则需要进行一些调试才能成功。</p>

<h2 id="确定问题">确定问题</h2>

<p>要了解CORS配置的基本问题，您需要找出哪个请求有问题以及原因。步骤如下：</p>

<p> </p>

<ol>
 <li> 打开有问题的网站并打开开发者工具（<a href="/en-US/docs/Tools">Developer Tools</a>）。</li>
 <li> 尝试重现失败的事务并检查控制台（ <a href="/en-US/docs/Tools/Web_Console">console</a>）是否看到CORS违规错误消息。它可能看起来像这样：</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>注意：出于安全原因，JavaScript代码无法给出有关CORS请求出错的详细信息。 所有代码都知道发生了错误。 确定具体问题的唯一方法是查看浏览器的控制台以获取详细信息。</strong></span></span></span></p>
</div>

<h2 id="CORS错误信息">CORS错误信息</h2>

<p>当请求因CORS失败时，Firefox的控制台会在其控制台中显示消息。 错误文本的一部分是“原因”消息，它提供了对出错的更深入的了解。 消息的原因如下： </p>

<ul>
 <li><a href="/zh-CN/docs/Web/HTTP/CORS/Errors/CORSDisabled">原因：CROS被禁用</a></li>
 <li><a href="/zh-CN/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">原因：CROS请求未成功</a></li>
 <li><a href="/zh-CN/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">原因：CROS头字段“Origin”未被添加</a></li>
 <li><a href="/zh-CN/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">原因：CORS不允许请求外部重定向</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="参见">参见</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>