跨域资源共享 (CORS) 详解：简单与非简单请求
2024-01-05 20:02:13
跨域资源共享 (CORS)：揭开简单请求和非简单请求的神秘面纱
在现代 Web 应用程序的浩瀚世界中，跨域资源共享 (CORS) 扮演着至关重要的角色，它允许不同来源的应用程序安全地进行交流。理解 CORS 的请求类型对于实现无缝且安全的跨域通信至关重要。
CORS 请求类型
CORS 请求分为两大类：
1. 简单请求
简单请求是较为常见的，具有以下特点：
- 使用常见的 HTTP 方法（如 GET、HEAD、POST）
- MIME 类型为 text/plain、application/x-www-form-urlencoded 或 multipart/form-data
- 不包含自定义标头字段
浏览器会自动发送简单请求，而无需进行额外的验证。服务器只需返回适当的 CORS 响应标头，如 Access-Control-Allow-Origin，即可启用跨域访问。
2. 非简单请求
非简单请求比简单请求更复杂，具有以下特点：
- 使用除 GET、HEAD、POST 之外的 HTTP 方法（如 PUT、DELETE、OPTIONS）
- 具有自定义标头字段
- MIME 类型不属于 text/plain、application/x-www-form-urlencoded 或 multipart/form-data
对于非简单请求，浏览器会先发送一个预检请求（OPTIONS 方法）到服务器，以验证跨域请求是否被允许。如果服务器响应包含适当的 CORS 响应标头（如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers），则浏览器将发送实际请求。
实践中的应用
掌握简单请求和非简单请求之间的差异对于在实际应用程序中正确实施 CORS 至关重要。下面提供一些示例：
发送简单 GET 请求：
fetch('https://example.com/api/data', {
method: 'GET',
});
发送非简单 PUT 请求：
fetch('https://example.com/api/data', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'X-Custom-Header': 'custom-value',
},
body: JSON.stringify({ data: 'updated-data' }),
});
服务器端，必须配置 CORS 响应标头以允许跨域请求：
// 允许来自特定源的简单请求
header('Access-Control-Allow-Origin: https://mywebsite.com');
// 允许所有来源的非简单请求
header('Access-Control-Allow-Origin: *');
// 允许所有方法的非简单请求
header('Access-Control-Allow-Methods: PUT, DELETE, OPTIONS');
// 允许特定标头的非简单请求
header('Access-Control-Allow-Headers: X-Custom-Header');
结论
理解 CORS 中简单请求和非简单请求之间的区别是实现跨域应用程序安全可靠通信的关键。通过正确实施 CORS 策略，开发人员可以解锁跨源资源的强大功能，同时保持应用程序的完整性。
常见问题解答
-
为什么使用 CORS？
CORS 解决同源策略的限制，允许跨源通信，提高应用程序功能和灵活性。 -
简单请求和非简单请求有什么区别？
简单请求符合特定标准，可以快速处理，而非简单请求需要经过预检过程。 -
如何发送预检请求？
浏览器自动发送预检请求，使用 OPTIONS 方法和包含请求信息的标头。 -
服务器如何响应 CORS 请求？
服务器返回包含 CORS 响应标头的 HTTP 响应，如 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods。 -
CORS 的用途有哪些？
CORS 广泛用于跨域 AJAX 请求、JSONP 调用和跨域 iframe。
