当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 跨域的三种解决方案

跨域的三种解决方案

2019年05月25日  | 移动技术网IT编程  | 我要评论

跨域

什么是跨域

浏览器为了安全问题，增加的同源限制，其实请求是发出了，服务器也相应了，但是被浏览器劫持了。所谓同源是指，域名，协议，端口均相同，浏览器才会觉得符合要求，不限制你。。。

跨域解决办法有哪些？

好多，这里只介绍jsonp, cors, window.postmessage三种

  • jsonp

    原理: <script>标签不受跨域限制，ps：所有src属性都不受同源限制，比如<img>

jsonp缺点: 只支持get请求，不支持其他类型请求；优点：兼容性很好好，可以在古老的浏览器中运行。

  • cors

    cors是一个w3c标准，全称是"跨域资源共享"（cross-origin resource sharing）。它允许浏览器向跨源服务器，发出xmlhttprequest请求。

把请求分为了两种：简单请求和复杂请求。

如何分辨简单请求和复杂请求呢？只要不符合下面条件，就是复杂请求。

  • 请求方法是以下三种方法之一：

head

get

post

  • http的头信息不超出以下几种字段：

accept

accept-language

content-language

last-event-id

content-type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

知识点：

  • 面对复杂请求，浏览器会在第一次先发送一个预检请求，预检请求使用的是options方法，携带origin, access-control-request-method, access-control-request-headers，

  • 服务器拒绝的话，返回也是正常http相应，只是没有access-control-allow-origin字段； 服务器同意的话，返回的相应里除了access-control-allow-origin，还会有
access-control-allow-methods，
access-control-allow-headers，
access-control-allow-credentials，//它的值是一个布尔值，表示是否允许发送cookie。默认false，不发送
access-control-max-age // 该字段可选，用来指定本次预检请求的有效期，单位为秒, 在此期间，不用发出另一条预检请求。
  • 一旦服务器通过了"预检"请求，以后每次浏览器正常的cors请求，就都跟简单请求一样，会有一个origin头信息字段。服务器的回应，也都会有一个access-control-allow-origin头信息字段。

  • html5 window.postmessage api

    window.postmessage是一个安全的，基于事件的消息api

  1. 发送消息

需要发送的窗口wina，调用postmessage方法，即可发送消息，其中wina还可以是文档窗口中的iframe:

  var iframe = document.getelementbyid('my-iframe');
  var win = iframe.documentwindow;

postmessage语法：otherwindow.postmessage(message, targetorigin, [transfer]);
举栗子：win.postmessage('hello', 'ttp://jhssdemo.duapp.com/');

  1. 接收消息

要想接收到之前源窗口通过postmessage发出的消息，只需要在目标窗口注册message事件并绑定事件监听函数，就可以在函数参数中获取消息。

注意：postmessage只能发送字符串信息。

    window.onload = function() {
        var text = document.getelementbyid('txt');    
        function receivemsg(e) {
            // e 有三个属性：data, origin, source
            console.log("got a message!");
            console.log("\nmessage: " + e.data);
            console.log("\norigin: " + e.origin);
            // console.log("source: " + e.source);
            text.innerhtml = "got a message!<br>" +
                "message: " + e.data +
                "<br>origin: " + e.origin;
        }
        if (window.addeventlistener) {
            //为窗口注册message事件，并绑定监听函数
            window.addeventlistener('message', receivemsg, false);
        }else {
            window.attachevent('message', receivemsg);
        }
    };

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网