跨域问题的九种解决方法

什么是跨域?

  跨域是由于浏览器的同源策略造成的,是浏览器施加的安全限制。

什么是同源策略/SOP(Same origin policy)?

  同源策略是一种约定,是浏览器最核心最基本的安全功能,缺少同源策略,浏览器容易收到XSS、CSRF等攻击。

  同源策略是:拥有相同的协议、域名、端口号的网址间才可以相互访问资源。

  一个域的页面去访问另一个域的资源就形成了跨域。

解决跨域的方法:

  注意:1.如果是协议和端口造成的跨域问题,前端无法处理;

     2.是否跨域,仅仅通过URL的首部来判断,不会通过域名对应的IP地址是否相同来判断;

     3.跨域并不是请求发不出去,而是请求发出去了,也正常返回结果了,但是结果被浏览器拦截了。

1.利用JSONP方式解决跨域

  利用script标签没有跨域的限制,网页可以从其他来源动态的获取JSON数据,从而实现跨域。

  JSONP跨域仅支持GET请求,一定要服务器支持才可以实现。

  JSONP是非同源策略,AJAX属于同源策略。 

2.利用CORS(Cross-Origin Resource Sharing)技术,需要前后端同时支持

  前端浏览器在IE9以上,后端在响应报头添加Access-Control-Allow-Origin标签,从而允许指定域的站点访问当前域上的资源。

  res.setHeader("Access-Control-Allow-Origin","*");
不过CORS默认只支持GET/POST这两种http请求类型,如果要开启PUT/DELETE之类的方式,需要在服务端在添加一个"Access-Control-Allow-Methods"报头标签。

3.利用H5的postMessage 方法和 onmessage 事件解决跨域问题

  可实现多窗口之间的数据传递

4.利用H5的websocket协议,实现浏览器与服务器的全双工通信,同时允许跨域通讯。

服务器代理

5.node作为中间件代理

6.或者Nginx作为反向代理

iframe配合的三种形式

7.iframe+document.domain

  该方法只适合子域相同,主域不同的情况,在两个页面都设置document.domain='子域',其中一个页面嵌套另一个页面,就可以进行窗口之间的通信了。

8.iframe+location.hash

  通过改变location.hash的值,并不会导致页面刷新,来传递值

9.iframe+window.name

  

原文地址:https://www.cnblogs.com/surui/p/11667111.html