CORS原理与前端开发中的应用
2023-12-14 08:29:26
CORS：跨越网络边界的资源共享
在现代互联网中，我们经常需要在不同的网站或应用程序之间共享数据。但由于安全原因，浏览器通常会阻止跨域请求，即请求来自与目标资源不同的域名或端口。这可能会给开发人员带来一些挑战，尤其是当需要从外部来源获取数据时。
同源策略：安全之墙
为了保护用户的数据安全，浏览器引入了同源策略。同源策略规定，只有来自相同来源的请求才会被允许。这意味着，如果一个请求来自与目标资源不同的域名或端口，浏览器就会阻止该请求。
CORS：跨域请求的救星
为了解决跨域请求的限制，浏览器引入了 CORS（跨域资源共享）机制。CORS 允许不同来源的脚本访问受限资源，从而跨越网络边界的障碍。CORS 通过在 HTTP 请求头中添加一些额外的字段来工作，这些字段会告知服务器是否允许该请求。如果服务器允许该请求，浏览器就会允许该请求通过。
CORS 的类型：简单与复杂
CORS 将请求分为两种类型：简单请求和复杂请求。
-
简单请求： 满足以下条件的请求：
- 请求方法是 GET、POST、HEAD 或 PUT
- 请求头包含以下字段：Content-Type、Accept、Accept-Language、Content-Language、Content-Encoding、User-Agent、Referer、Cache-Control、Pragma
- 请求正文不包含任何数据
-
复杂请求： 不满足上述条件的请求。复杂请求需要进行额外的处理，包括发送预检请求。
预检请求：复杂请求的探路者
对于复杂请求，浏览器会首先发送一个预检请求（preflight request）到服务器。预检请求是一个 OPTIONS 请求，用于询问服务器是否允许该请求。预检请求的请求头中包含 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 等字段。服务器收到预检请求后，会返回一个预检响应。预检响应的响应头中包含 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等字段。这些字段的值决定了浏览器是否允许该请求通过。
服务器端 CORS 配置：允许跨域请求
为了允许跨域请求，服务器需要在响应头中添加 CORS 相关的头信息。这些头信息包括：
- Access-Control-Allow-Origin：指定允许跨域请求的来源域名。
- Access-Control-Allow-Methods：指定允许跨域请求的 HTTP 方法。
- Access-Control-Allow-Headers：指定允许跨域请求的请求头字段。
- Access-Control-Allow-Credentials：指定是否允许跨域请求携带凭证。
前端调用 CORS 接口：跨域请求的实践
在前端代码中，可以使用 XMLHttpRequest 或 fetch API 来发送跨域请求。在发送请求之前，需要设置请求头信息，以便浏览器能够正确发送预检请求。
// 使用 XMLHttpRequest 发送跨域请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', '*/*');
xhr.send();
// 使用 fetch API 发送跨域请求
fetch('https://example.com/api/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': '*/*',
},
})
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});
结论：跨越障碍，实现数据共享
CORS 作为一种解决跨域请求的机制，通过在 HTTP 请求头中添加一些额外的字段，来告知服务器是否允许该请求。在前端开发中，可以使用 CORS 来实现不同来源之间的资源共享。通过了解 CORS 的工作原理和实现方式，开发人员可以轻松解决跨域请求带来的问题，实现不同来源之间的无缝数据共享。
常见问题解答
-
什么是跨域请求？
跨域请求是指请求者和资源响应者处于不同域名的请求。 -
为什么浏览器会阻止跨域请求？
为了保护用户的数据安全，浏览器引入了同源策略，该策略规定只有来自相同来源的请求才会被允许。 -
CORS 如何解决跨域请求？
CORS 通过在 HTTP 请求头中添加一些额外的字段来工作，这些字段会告知服务器是否允许该请求。如果服务器允许该请求，浏览器就会允许该请求通过。 -
什么是简单请求和复杂请求？
简单请求满足以下条件：请求方法是 GET、POST、HEAD 或 PUT，请求头包含特定的字段，请求正文不包含任何数据。复杂请求不满足上述条件。 -
预检请求是什么？
预检请求是浏览器在发送复杂请求之前发送的 OPTIONS 请求，用于询问服务器是否允许该请求。
