什么是跨域？如何解决跨域问题？

跨域问题是Web开发中一个经典且必须面对的安全限制。它源于浏览器的同源策略，该策略阻止一个源的文档或脚本与另一个源的资源进行交互。理解其原理和解决方案是构建现代分布式Web应用的基础。

同源策略与跨域的定义

同源策略要求协议、域名和端口三者必须完全相同才被视为同源。只要其中一项不同，就被认为是跨域请求。浏览器会出于安全考虑，默认阻止此类请求的响应数据被页面JavaScript访问。

// 假设当前页面源为 https://www.example.com:443
// 以下均为跨域：
// https://api.example.com (域名不同)
// http://www.example.com (协议不同)
// https://www.example.com:8080 (端口不同)

这项策略旨在防止恶意网站通过脚本窃取另一个网站的敏感数据。然而，在合法需要跨域访问的场合，我们必须采用特定的技术手段来绕过这个限制。

常见的跨域解决方案

最常用且由W3C标准支持的方案是CORS。服务器通过在响应头中设置Access-Control-Allow-Origin来告知浏览器允许哪些源进行访问。这是现代前后端分离架构中的标准做法。

// 服务器端响应头示例
Access-Control-Allow-Origin: https://www.your-site.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

对于简单的请求，浏览器会直接发出并检查响应头。对于非简单请求（如使用了特定方法或自定义头），浏览器会先发送一个OPTIONS预检请求，获得服务器确认后才发送真实请求。

JSONP是一种利用<script>标签不受同源策略限制的老式方法。它通过动态创建脚本标签，将回调函数名作为参数传递给服务器，服务器返回一段调用该函数的JavaScript代码。

function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.other-site.com/data?callback=handleResponse';
document.body.appendChild(script);

JSONP只支持GET请求，且缺乏错误处理机制，在现代开发中已逐渐被CORS替代。

开发阶段的代理服务器方案

在开发阶段，前端开发服务器可以配置代理。这使你可以将API请求转发到同源的后端服务器，再由开发服务器代为请求真实的后端API，从而完全避免浏览器的跨域限制。这是Vite、Webpack等工具开发服务器的常见配置。

其他解决方案包括使用window.postMessage进行跨文档通信，或在服务器端设置一个同源的中转接口。对于WebSocket通信，它不受同源策略限制。选择哪种方案取决于你的具体场景：CORS适用于控制自己后端的情况；代理适用于开发环境或前端主导的项目；JSONP可用于快速集成不支持CORS的旧式公共服务。