深入了解CORS

本文，由Panayiotis“ PVGR” Velisarakos进行了同行评审（感谢所有SitePoint Pose Peer Reviewer！），探索了交叉孔源资源共享（CORS），HTML5 API启用网站可以访问先前受限制的外部资源。 CORS放宽了同一原始政策，允许向不同域的请求。 例如，在CORS之前，跨域AJAX请求是不可能的。本文演示了CORS如何增强Web体验。

钥匙要点：

大多数现代浏览器都支持CORS。
标题确定哪些起源可以访问服务器响应。
2. Access-Control-Allow-Origin标题控制cookie访问。
3. >简单的请求（获取，头，发布）不要触发前飞行；更复杂的请求会。Access-Control-Allow-Credentials
>
4. 属性（带有
或
5. 值）控制凭证处理 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173984767246953.jpg" class="lazy" https: alt="”" cors><code>crossorigin> anonymoususe-credentials preflights： <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173984767246953.jpg" class="lazy" alt="An In-depth Look at CORS "> <p><strong>Preflights:</strong></p> <p>For complex requests (methods beyond GET/HEAD/POST, or custom headers), preflights (an initial OPTIONS request) verify server acceptance. The server responds with <code>Access-Control-Allow-Origin 对于复杂的请求（超出get/head/post或自定义标头）的复杂请求（初始选项请求）验证服务器接受。 服务器响应Access-Control-Allow-Credentials，Access-Control-Allow-Methods，Access-Control-Allow-Headers，Access-Control-Max-Age和Access-Control-Request-Method>标题。客户端在前飞行中发送Access-Control-Request-Headers>>>>

   

   CORS和CANVAS IMAGES：>

   要在画布中使用外部图像，服务器必须启用CORS（例如，通过在服务器配置中设置

   ）。客户端代码需要Access-Control-Allow-Origin。 没有CORS，就会发生安全例外。img.setAttribute('crossOrigin', 'anonymous');>

   

   >属性：crossorigin>

   >使用HTML标签获取外部资源（图像，样式表，脚本）时，属性会触发带有

   header的cors请求。 crossorigin省略凭据； Origin包括它们（需要服务器端anonymous）。use-credentials> Access-Control-Allow-Credentials: true

   结论：

   通过促进交叉原始资源访问，CORS可显着增强Web开发。 了解其安全含义并正确实施至关重要。

   >

   常见问题（常见问题解答）：>

   >常见问题解答部分提供了有关CORS的常见问题的详细答案，涵盖了标头的目的，cookie处理的目的，简单与预覆盖的请求，服务器端配置，安全风险，HTTP请求兼容性，特定标头，浏览器行为的作用，测试以及CORS和JSONP之间的差异。 （原始常见问题解答部分保留了整体。）

以上是深入了解CORS的详细内容。更多信息请关注PHP中文网其他相关文章！