先说说跨域是啥。简单讲，就是浏览器为了安全，搞了个同源策略：协议、域名、端口都得一样，否则就拦着请求。比如你前端跑在，后端在，这就跨域了。浏览器会直接拒绝响应，让你前端拿不到数据。听起来烦人，但其实解决方法挺多的，下面我挑几个实用的说说。
第一个是老生常谈的JSONP。这方法利用了script标签可以跨域的特性，只支持GET请求。用法很简单，前端动态创建一个script标签，src指向后端接口，并传个回调函数名过去。后端返回的数据包裹在这个函数调用里，前端就能执行了。比如，你可以在代码里写个函数handleData，然后请求像这样。后端返回的内容会是handleData({...})，浏览器一加载就自动执行。优点是简单兼容性好，老浏览器都支持。缺点嘛，只支持GET，安全性差，容易被人注入恶意代码。我早期项目用过，但现在不太推荐了，除非你非得兼容IE8这种老古董。
接下来是CORS（跨域资源共享），这是现在的主流方案，尤其适合RESTful API。它靠服务器设置响应头来允许跨域。比如，后端在响应里加个Access-Control-Allow-Origin: *，就能让所有域名访问；或者指定具体域名，比如。如果涉及带凭证的请求，比如cookie，还得加Access-Control-Allow-Credentials: true，并且Origin不能是通配符。另外，预检请求（比如PUT、DELETE）需要处理OPTIONS方法，设置Access-Control-Allow-Methods和Access-Control-Allow-Headers。我在用Spring Boot时，简单加个@CrossOrigin注解就搞定了，超方便。优点是标准、安全，支持各种HTTP方法。缺点是需要后端配合，如果服务器不是你控制的，就有点麻烦。
代理服务器也是个好办法，特别适合开发环境。原理很简单，前端请求发给同域的代理，代理再转发给目标服务器，绕过浏览器限制。比如用webpack-dev-server，在vue.config.js里配置proxy：{ '/api': { target: '', changeOrigin: true } }，这样前端请求/api/users就会被代理到后端。生产环境可以用Nginx做类似配置，location /api { proxy_pass ; }。我经常用这个，开发时省心，不用改后端代码。优点是对前端透明，兼容性好；缺点是多了层代理，可能影响性能，还得维护服务器配置。
如果你做的是实时应用，比如聊天室，WebSocket也能解决跨域。WebSocket协议本身不受同源策略限制，但建立连接时浏览器会发Origin头，服务器可以验证。前端用new WebSocket('ws://')，后端检查Origin是否允许就行。我用过库，配置起来不难，还能自动降级。优点是适合长连接场景，性能高；缺点是只适用于WebSocket通信，不适合普通HTTP请求。
还有个冷门但实用的postMessage，主要用于iframe跨域。比如，你页面里嵌了个第三方iframe，想和它通信，就可以用window.postMessage发消息，对方用message事件接收。我在做单点登录时用过，主站和子站之间传数据挺方便。优点是灵活，支持复杂场景；缺点是只限于窗口间通信，配置起来有点绕。
最后提一下document.domain，这方法只适用于主域相同、子域不同的情况，比如和。设置document.domain = ''后，它们就能互访了。不过现在用的人少，因为限制太大，而且现代项目多是全子域隔离。
总结一下，选哪种方案得看具体场景。JSONP适合老项目，CORS是首选标准，代理在开发时好用，WebSocket专攻实时，postMessage处理iframe问题。实际项目中，我一般先试试CORS，不行再上代理。跨域虽然烦，但掌握这些方法后，就能游刃有余了。大家要是有其他妙招，欢迎分享，一起交流进步！