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

是由于浏览器同源策略导致的，只能访问同一个源，同源也就是 协议 + 域名 + 端口 必须三者保持一致，如果有其一不同就是跨域。解决跨域的方法一般通常有这么几种：JSONP 、cors、ngix反向代理、postMessage、websocket、iframe。

• jsonp

  • 主要是通过 script属性不受同源策略的限制，可以将回调函数放入到请求的query参数中，服务端返回这个回调函数的执行，并将相应数据返回到回调函数中的参数，从而获取json数据.
  • 优点是兼容性好。缺点是仅支持get请求。

• cros

  • 跨域资源共享标准新增了一组http首部字段 允许服务器声明哪些源可以通过浏览器有权访问。另外规范要求哪些可能对服务器数据产生副作用的http请求方法（特别是get以外的请求方法，或者搭配某些mime类型的post请求）浏览器必须首先使用options方法发起一个预检请求，从而获知是否允许该跨域请求，服务器确认允许之后，然后才发起实际http请求。在预检请求的返回中，服务器端也可以通知客户端是否需要携带身份凭证（包括cookies 和 http认证信息）
  • Access-control-Allow-Origin : 允许跨域的源
  • Access-Control-Allow-Credentials : 是否允许客户端携带cookies和http认证信息
  • Access-Control-Expose-Headers :cors请求时 xhr对象的getResponseHeadaer()能获取6个基本字段：cache-control content-language content-type expires last-modified pragma 如果需要其他字段需要指定。
  • Access-Control-Allow-Method: 允许跨域的请求方法用逗号隔开
  • Access-Control-Allow-Headers: 允许跨许的字段

• nginx反向代理

• postMessage

  • h5引入的一种跨文档通信机制，允许不同页面窗口可以进行数据传递，即使他们不属于同一个源。
  • 发起消息的一方通过window.postMessage() 方法 将消息传递至目标域地址。
  • 接收方通过监听message事件接收来自事件对象event的 数据 包括源 event.origin 和数据 event.data
  • 需要注意的是接收方需要在发送的一方之前创建或打开。如果需要匹配所有其他域 则目标域改成*

• websocket

  • 首先什么是websocket ：是一种在单个TCP连接上进行全双工通讯的协议,不受浏览器同源策略限制。

• iframe