跨域题目的基础解决方案CORS

2024年4月23日 152次阅读 来源: 刘宁Leo

引见

关于跨域题目有许多的处理方案，这里我们总结一下如今最通用最壮大的处理方案：CORS。

W3C 的 Web 工作组引荐了一种新的机制，即跨域资本共享（Cross-origin Resource Sharing），简称CORS。实在这个机制就是完成了跨站接见掌握，使得安全地举行跨站数据传输成为可能。

跨源资本共享规范( cross-origin sharing standard) 使得以下场景能够运用跨站 HTTP 要求：

  1. 运用 XMLHttpRequest 或 Fetch提议跨站 HTTP 要求。
  2. Web 字体 (CSS 中经由过程 @font-face 运用跨站字体资本)，因而，网站就能够宣布 TrueType 字体资本，并只许可已受权网站举行跨站挪用。
  3. WebGL 贴图
  4. 运用drawImage绘制
  5. Images/video 画面到canvas.
  6. 样式表（运用 CSSOM）
  7. Scripts (for unmuted exceptions)

CORS分为简朴要求和庞杂要求，处置惩罚要领也是有差别的，所以我们离别总结。

简朴要求

什么是简朴要求呢？同时满足以下两个前提，就是简朴要求：

  1. 要求是以下之一：
    HEAD
    GET
    POST
  2. HTTP的头信息不超越以下几种字段：
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

完成要领异常简朴，只需要把服务器的相应报文里的Access-Control-Allow-Origin设置为*或许包括由 Origin指明的站点。

Access-Control-Allow-Origin是HTTP相应报文中的一个字段，Origin是HTTP要求报文中的以一个字段,假如不清楚这两个字段的话，能够自行查阅关于HTTP报文的学问，比方HTTP | MDN。

庞杂要求

假如不是简朴要求，那就是庞杂要求，比方要求的要领是PUT或许DELETE，比方Content-Type字段的范例是application/json，比方设置了自定义头信息。

庞杂要求就是比简朴要求多了个预检要求（preflight）罢了。

预检要求就是浏览器先讯问服务器，当前网页地点的域名是不是在服务器的许可名单当中，以及能够运用哪些HTTP动词和头信息字段。只要获得一定回复，浏览器才会发出正式的XMLHttpRequest要求，不然就报错。

预检要求用的要求要领是OPTIONS，示意这个要求是用来讯问的。头信息内里，症结字段是Origin，示意要求来自哪一个源。除了Origin字段，另有两个字段异常重要：Access-Control-Request-Method和Access-Control-Request-Headers，离别示意许可的要求要领和要求头。

举一个详细的例子：

如今，我们有一个页面向服务器发送了一个POST要求，而且我们本身定义了一个要求头字段My-HEADER，这时候浏览器就会起首发送一个OPTION要求来做预检要求，要求头里有以下字段：

Access-Control-Request-Method: POST
Access-Control-Request-Headers: My-HEADER

假如预检要求胜利的话，相应头里的内容以下：

Access-Control-Allow-Origin: http://example.com //表明服务器许可http://example.com的要求
Access-Control-Allow-Methods: POST, GET, OPTIONS //表明服务器能够接收POST, GET和 OPTIONS的要求要领
Access-Control-Allow-Headers: My-HEADER //通报一个可接收的自定义要求头列表
Access-Control-Max-Age: 3000000 //通知浏览器，本次预检要求的相应效果有用时候是多久

总结

以上就是CORS要领处理跨域题目的流程，CORS支撑一切范例的HTTP要求，是如今跨域题目的基础处理方案。

    原文作者：刘宁Leo
    原文地址: https://segmentfault.com/a/1190000013285839
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞