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

一、产生原因

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

二、解决办法

1.JSONP

JSONP是一个非官方协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback的形式实现跨域访问。
基本思想：网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源策略限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

    <script type="text/javascript">
        function jsonpCallback(result){
            //alert(result);
            for(var i in result){
                alert(i + ":" + result[i]);     //循环输出
            }
        }
        var JSONP = document.createElement("script");
        JSONP.type = "text/javascript";
        JSONP.src = "http://crossdomain.com/services.php?callback=jsonpCallback";
        document.getElementsByTagName("head")[0].appendChild(JSONP);
    </script>

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协议。

最后编辑于：2018.10.28 19:58:54