针对不同情况和需求,可以采取以下几种方法来解决跨域问题:
- JSONP(JSON with Padding):由于在 script 标签中不存在跨域限制,所以可以通过动态创建 script 标签,将需要获取的数据包装成一个函数,再指定一个回调函数名(一般会约定在服务端),通过 script 标签的 src 属性将函数传递到服务端,服务端将数据按照函数的形式返回给客户端,客户端在回调函数中拿到数据并进行处理。缺点是只支持 GET 请求,不支持 POST 等请求方式。
- CORS(Cross-Origin Resource Sharing):在服务端设置响应头,允许指定的源(Origin)发起跨域请求,浏览器在发送请求时会附带 Origin 头,服务端在返回时会附带 Access-Control-Allow-Origin 头,指定允许的源,以及其他相关的头部信息。支持所有请求方式,但需要服务端进行额外的配置。
- 代理请求:在同源的情况下,通过服务端的中转,将数据请求到本地,再将请求结果返回给客户端。这种方式需要服务端进行额外的处理,增加了服务端的负担,但是能够支持所有请求方式。
- WebSocket:通过 WebSocket 协议建立一条双向通讯的通道,实现跨域数据的实时传输。需要浏览器和服务端都支持 WebSocket 协议,并且需要额外的服务端配置。
- postMessage:通过 window.postMessage 方法,在不同的窗口或 iframe 之间进行消息传递,实现跨域数据的交流。需要浏览器支持 HTML5 新特性,并且需要在不同的窗口或 iframe 中都进行相应的处理。