一、什么是跨域
1、跨域的产生
在Web开发中，一个网页请求另一个域（域名、协议、端口号任一不同）的资源，就会发生跨域。
2、跨域请求
跨域请求是指在浏览器中执行的请求，其目标资源的域名、协议或端口与当前页面不同。
3、跨域资源共享（CORS）
跨域资源共享（CORS）是一种机制，它允许在一个源（域名、协议、端口）上的网页应用程序访问另一个源上的部分资源。
二、跨域资源共享（CORS）的工作原理
1、客户端发起跨域请求
当浏览器的前端代码中发起了一个跨域请求时，浏览器会首先发送 OPTIONS 预检请求（Preflight Request）给目标服务器，以确定是否允许进行跨域请求。
2、服务器响应预检请求
目标服务器接收到 OPTIONS 请求后，会进行预检查，检查是否允许当前域名的请求。服务器会在响应中包含一些 CORS 相关的头部信息，如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 等。
3、浏览器检查响应头部
浏览器接收到服务器的响应后，会检查响应头部中的 CORS 相关信息，如果允许跨域请求，则浏览器会发送实际的请求给服务器，否则会阻止请求。
简单说👀
浏览器先发送 OPTIONS 预检请求给服务器
服务器在 header 加上 CORS 相关信息返给浏览器
浏览器看看能不能跨域，能就发实际请求，不能就拉倒
三、前端如何处理跨域请求
1、JSONP（仅限 GET 请求）
JSONP 是一种通过动态创建 <script> 标签实现跨域请求的方法。服务器返回的数据被包裹在一个 JavaScript 函数调用中，前端通过指定回调函数来获取数据。JSONP 的缺点是仅支持 GET 请求，并且容易受到安全漏洞的影响。
2、CORS
使用 CORS 可以实现跨域资源共享，通过在服务器端设置响应头部来允许特定域名的跨域请求。前端无需额外处理，浏览器会自动处理 CORS 相关的预检请求和实际请求。
3、代理
前端通过自己的服务器端建立一个代理服务器来转发请求，实现跨域访问。前端发送请求给自己的服务器，服务器再将请求转发给目标服务器，并将响应返回给前端。这种方式可以绕过浏览器的同源策略限制，但会增加服务器的负担和延迟。
4、WebSocket
WebSocket 是一种全双工通信协议，可以在客户端和服务器之间建立持久的连接，实现跨域通信。由于 WebSocket 不受同源策略的限制，可以直接在前端代码中使用 WebSocket 进行跨域通信。