【Web前端】CORS概述

1、基本概念

• CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种基于HTTP的安全特性，它允许网页从一个域请求来自不同源服务器上的指定资源。这是一种安全功能，用于防止恶意网站读取另一个网站的数据。
• 同源策略是浏览器的一种安全策略，它规定只有同源的请求（即协议、域名和端口号都相同）才能被允许访问。CORS是对同源策略的一种扩展，允许服务器指定哪些外部网站可以访问其资源。

2、工作机制

CORS通过HTTP头部字段来告知浏览器，哪些跨域请求是被允许的。这些HTTP头部字段通常由服务器在响应请求时设置。

1. 预检请求（Preflight Request）：对于某些请求方法（如PUT、DELETE或CONNECT等）或当请求设置了一些特殊的头部（如Content-Type为application/json）时，浏览器会先发送一个OPTIONS请求到服务器，以检查实际请求是否安全，这个过程称为预检。服务器在响应OPTIONS请求时，会明确告知浏览器哪些方法和头部是可以被接受的。

2. 实际请求（Actual Request）：如果预检请求成功，浏览器才会发送实际的跨域请求。

3、相关的HTTP头部字段

• Access-Control-Allow-Origin：指定哪些网站可以访问资源。可以设置为具体的域名，或者使用通配符*表示接受所有域名的请求。但出于安全考虑，建议尽可能避免使用*。

• Access-Control-Allow-Methods：指定服务器支持哪些跨域请求的方法。

• Access-Control-Allow-Headers：指定服务器支持哪些跨域请求的头部字段。

• Access-Control-Expose-Headers：允许服务器指定哪些头部字段可以暴露给前端JavaScript代码。

• Access-Control-Max-Age：指定预检请求的结果（即OPTIONS请求的响应）能够被缓存多久。

4、应用场景

CORS主要用于Web开发中，特别是在前后端分离的应用中。前端页面可能部署在一个服务器上，而后端API可能部署在另一个服务器上，通过CORS机制可以实现前端对后端资源的跨域请求。