撕掉跨源资源共享（CORS）这块狗皮膏药
2023-11-20 18:31:15
一、跨源资源共享（CORS）
跨源资源共享（CORS）是一种机制，它允许来自不同源的Web应用程序进行通信。它解决了XMLHttpRequest和其他跨域技术所面临的安全问题。
在传统的浏览器中，出于安全考虑，Web应用程序只能与来自同一源的资源进行通信。源由协议、主机和端口组成。例如，http://www.example.com:80和https://www.example.com:443是不同的源。
CORS通过在HTTP请求中添加额外的首部字段来允许跨源请求。这些首部字段指定了哪些源可以访问该资源。
二、CORS的几种模式
CORS有四种模式：
- 简单请求模式 ：这种模式只允许使用GET、HEAD和POST方法，并且请求中不能包含任何自定义的首部字段。
- 预检请求模式 ：这种模式用于复杂请求，例如PUT、DELETE或PATCH方法，或者请求中包含自定义的首部字段。在预检请求中，浏览器会发送一个OPTIONS请求到服务器，以询问服务器是否允许该请求。
- 不支持CORS请求模式 ：这种模式表示服务器不支持CORS请求。
- 不发送CORS响应模式 ：这种模式表示服务器不发送CORS响应。
三、响应首部字段的意义
在CORS响应中，服务器可以设置以下首部字段：
- Access-Control-Allow-Origin ：该首部字段指定了哪些源可以访问该资源。
- Access-Control-Allow-Credentials ：该首部字段指定了是否允许客户端发送凭证（例如Cookie和HTTP认证）。
- Access-Control-Allow-Headers ：该首部字段指定了客户端可以发送哪些自定义的首部字段。
- Access-Control-Allow-Methods ：该首部字段指定了客户端可以使用的HTTP方法。
- Access-Control-Max-Age ：该首部字段指定了预检请求的结果可以缓存多长时间。
四、跨域的OPTIONS请求
在预检请求模式中，浏览器会发送一个OPTIONS请求到服务器，以询问服务器是否允许该请求。OPTIONS请求的请求方法是OPTIONS，请求中不包含任何数据。
服务器在收到OPTIONS请求后，会返回一个CORS响应，其中包含了有关该请求的信息。例如，服务器可以指定哪些源可以访问该资源，是否允许客户端发送凭证，以及客户端可以使用的HTTP方法。
浏览器在收到CORS响应后，会决定是否允许该请求。如果浏览器允许该请求，则会发送一个新的请求到服务器。新的请求将使用与OPTIONS请求相同的请求方法，但请求中会包含数据。
五、撕掉CORS这块狗皮膏药
CORS虽然解决了跨域请求的安全问题，但它也带来了很多问题。例如，CORS请求需要两次请求，这会降低应用程序的性能。此外，CORS请求还会限制应用程序的功能，例如，应用程序不能使用XMLHttpRequest来直接访问来自不同源的资源。
为了解决这些问题，我们可以撕掉CORS这块狗皮膏药。我们可以使用Fetch API来代替XMLHttpRequest。Fetch API是一个新的API，它支持跨域请求，并且不需要两次请求。此外，Fetch API还允许应用程序使用XMLHttpRequest来直接访问来自不同源的资源。
结论
CORS是一种机制，它允许来自不同源的Web应用程序进行通信。CORS有四种模式：简单请求模式、预检请求模式、不支持CORS请求模式和不发送CORS响应模式。在CORS响应中，服务器可以设置以下首部字段：Access-Control-Allow-Origin、Access-Control-Allow-Credentials、Access-Control-Allow-Headers、Access-Control-Allow-Methods和Access-Control-Max-Age。在预检请求模式中，浏览器会发送一个OPTIONS请求到服务器，以询问服务器是否允许该请求。CORS虽然解决了跨域请求的安全问题，但它也带来了很多问题。我们可以使用Fetch API来代替XMLHttpRequest，以解决这些问题。
