“OK, but no”
如果您曾经使用过AJAX，则可能熟悉浏览器控制台中显示的以下错误：
无法加载https://example.com/：请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问来源' https://anfo.pl'。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。
如果看到此消息，则表示响应失败，但是如果转到“网络”选项卡，您仍然可以看到返回的数据-这里的想法是什么？
跨域资源共享（CORS）
您观察到的行为是浏览器CORS实现的结果。
在CORS变得标准化之前，出于安全原因，无法在不同域下调用API端点。相同来源策略阻止了（并且在某种程度上仍然如此）。
CORS 是一种机制，旨在允许代表您发出的请求，同时阻止流氓JS发出的某些请求，并在您向以下位置发出HTTP请求时被触发：
- 一个不同的域（例如example.com上的站点称为api.com）
- 一个不同的子域（例如，example.com上的站点调用api.example.com）
- 不同的端口（例如，example.com上的站点调用example.com:3001）/)
- 其他协议（例如，位于https://example.com的网站称为http://example.com）
这种机制可以防止攻击者在各种网站（例如，通过Google Ads展示的广告中）中植入h脚本，从而对www.yourbank.com进行AJAX调用，并防止您使用您的凭据登录进行交易。
如果服务器未使用对“简单”GET或POST请求的特定标头进行响应-它仍将被发送，则数据仍将被接收，但浏览器将不允许JavaScript访问响应。
如果您的浏览器尝试做一个“非简单的”请求（例如，包括cookie，或其中要求Content-type比其他application/x-ww-form-urlencoded，multipart/form-data或text-plain所谓的机制）预检将被使用，一个OPTIONS请求将被发送到服务器。
“非简单”请求的一个常见示例是添加cookie或自定义标头-如果您的浏览器发送了这样的请求，并且服务器未正确响应，则仅会进行预检调用（没有额外的标头），而是实际的HTTP请求意欲制造的浏览器将不被发送。
访问控制允许什么？
CORS在请求和响应中都使用了一些HTTP标头，但为了继续工作，您必须理解的标头是：
Access-Control-Allow-Origin
该标头应由服务器返回，并指示允许哪些客户端域访问其资源。该值可以是：
-
*-允许任何域 - 完全限定的域名（例如https://example.com）
如果您要求客户端传递身份验证标头（例如cookie），则该值不能是*-它必须是完全合格的域！
Access-Control-Allow-Credentials
如果您的服务器支持通过cookie进行身份验证，则仅在响应中要求此标头。在这种情况下，唯一有效的值是true。
Access-Control-Allow-Headers
提供以逗号分隔的服务器愿意支持的请求标头值列表。如果您使用自定义标头（例如，x-authentication-token您需要在此ACA标头响应中返回它以进行OPTIONS调用，否则该请求将被阻止。
Access-Control-Expose-Headers
同样，此响应应包含一个标头列表，这些标头将出现在对呼叫的实际响应中，并且应可供客户端使用。所有其他标题将受到限制。
Access-Control-Allow-Methods
服务器愿意支持的以逗号分隔的HTTP请求类型动词（例如GET，POST）列表。
Origin
此标头是客户端发出的请求的一部分，并将包含启动应用程序的域。出于安全原因，浏览器不允许您覆盖此值。
如何解决CORS“错误”？
您必须了解CORS行为不是错误-它是一种按预期运行的机制，目的是保护您的用户，您或所呼叫的站点。
有时，缺少适当的标头是错误的客户端实现的结果（例如，缺少授权数据（如API密钥））。
根据您所面临的情况，有几种方法可以“修复错误”：
答：我正在开发前端，并且可以控制或认识开发后端的人
这是最好的情况-您应该能够在要调用的服务器上实现正确的CORS响应。如果该APIexpress用于节点，则可以使用简单的cors程序包。如果要确保站点安全，请考虑使用白名单作为Access-Control-Allow-Origin标题。
B-我正在开发前端，但是现在无法控制后端，我需要一个临时解决方案
这是第二好的方案，因为它只是A，但有一些时间限制。要临时解决此问题，您可以使浏览器忽略CORS机制-例如，使用ACAO Chrome扩展程序，或者通过运行带有以下标志的Chrome完全禁用它：
chrome --disable-web-security --user-data-dir
重要提示， 请记住，这将在整个浏览器会话期间禁用每个网站的机制。请谨慎使用。
这里的另一种选择是使用devServer.proxy（假设您正在使用Webpack来服务您的应用程序）或使用CORS即服务解决方案，例如https://cors-anywhere.herokuapp.com/
C —我正在开发前端，无法控制后端，并且永远不会
好吧，现在事情变得复杂了。首先，您可能应该确定为什么服务器未发送正确的标头。
也许他们不允许第三方应用程序访问其API？也许它们的API仅打算由服务器端应用程序而非浏览器使用？也许您应该在URL中发送各种授权令牌？
如果您仍然认为应该能够通过浏览器访问数据，则必须编写自己的代理，该代理位于浏览器应用程序和API之间，类似于我们在解决方案B中所做的那样。
在中间添加代理
代理不必与您的应用程序在同一域上运行，只要在与客户端通信时代理本身正确支持CORS。代理与API之间的通信完全不必支持CORS。
您可以编写自己的平台，也可以使用现成的解决方案，例如https://www.npmjs.com/package/cors-anywhere
请记住，如果您要支持凭据，则这种方法可能会带来安全风险。
