揭秘前端跨域与应对策略：3分钟掌握技术知识

跨域的谜团：浏览器隔阂下的数据之争

在浩瀚的网络世界中，网站之间的数据交换至关重要，它使我们能够无缝地浏览信息、购物和与他人互动。然而，一个名为 "跨域" 的障碍却横亘在我们面前，阻碍了不同域名网站之间的资源共享。让我们一起揭开跨域之谜，探索其本质、类型和解决之道。

跨域的本质：数据隔阂的防火墙

跨域，顾名思义，是指不同域之间的资源请求。浏览器出于安全考虑，限制了此类请求，旨在防止恶意网站窃取敏感信息。当您尝试从一个域向另一个域发送请求时，浏览器就会触发跨域错误，阻止数据传输。

跨域的类型：简单与复杂

跨域请求可分为两大类：简单请求和复杂请求。

简单请求：

• 请求方法仅限于 GET、POST、HEAD 或 OPTIONS。
• Content-Type 请求头为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。
• 不发送自定义请求头。
• 不包含凭证信息（如 Cookie、HTTP 认证等）。

复杂请求：

不满足上述条件的请求均为复杂请求。它们在正式发送请求之前，需要先向服务器发送一个预检请求。预检请求相当于询问服务器是否允许发送实际的请求。

预检请求：确保请求的安全性

预检请求是一个 OPTIONS 请求，携带以下请求头：

• Origin：请求来源。
• Access-Control-Request-Method：实际请求的方法。
• Access-Control-Request-Headers：实际请求将携带的自定义请求头。

服务器收到预检请求后，会返回一个预检响应。预检响应包含以下响应头：

• Access-Control-Allow-Origin：允许的请求源。
• Access-Control-Allow-Methods：允许的请求方法。
• Access-Control-Allow-Headers：允许的自定义请求头。
• Access-Control-Max-Age：预检响应的缓存时间。

双重请求之谜

在复杂请求的情况下，浏览器会先发送预检请求，再发送实际请求。这是因为预检请求是必要的，它可以确保实际请求是安全的。如果服务器不允许实际请求，浏览器就不会发送实际请求。

跨域解决方案：绕过限制

解决跨域问题，有以下几种方案：

JSONP：

利用