前端跨域问题产生原因和解决方法

一、产生原因

• 跨域是a页面想要获取b页面资源，如果a,b页面的协议、域名、端口号、子域名不同，所进行的访问都是跨域的，而浏览器一般为了安全都限制了跨域访问，也就是不允许跨域访问资源。

二、解决办法

1.JSONP

• JSONP是一个非官方协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback的形式实现跨域访问。
• 基本思想：网页通过添加一个

  2.window.name

  • window.name+iframe需要目标服务器响应window.name，window对象有一个name属性，该属性有个特征：即在一个窗口（window）的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每个页面对window. name都有读写的权利，window.name 是持久存在一个窗口载入过的所有页面中的！

  3.window.postMessage

  • HTML5引入了一个全新的API：跨文档消息传输Cross Document Messaging 。它的目标是在一个单独的持久连接上提供全双工、双向通信。（同源策略对web sockets不适用）
  • web sockets原理：在JS创建了web sockets之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockets协议。
  • otherWindow.postMessage(message, targetOrigin)
    otherWindow：指目标窗口，也就是给哪个窗口发消息，是window.frames属性的成员或者由window.open方法创建的窗口。
    参数说明：
    (1)message：是要发送的消息，类型为string，object
    (2)targetOrigin：是限定消息接收范围，不限制使用“ * ”

  4.CORS

  • 基本思想：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

  5.web sockets

  • web sockets是浏览器的一种API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
  • web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。