关于前端如何解决跨域问题

Posted haoyiwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于前端如何解决跨域问题相关的知识,希望对你有一定的参考价值。

跨域

什么是跨域

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

  一旦有一个不同源,浏览器便会触发安全机制。

跨域解决办法有哪些?

应该有很多,我就介绍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);
        }
    };

以上是关于关于前端如何解决跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

相关前台跨域的解决方式

关于跨域的问题

20K前端大神面试如何回答ajax跨域问题!

前端跨域如何解决?

如何解决前端跨域问题?

如何解决js跨域问题