跨域处理

由于浏览器同源策略限制，对于协议不同、主机名不同、端口不同的服务器，不能互相访问资源。

为什么浏览器会禁止跨域？

跨域的访问会带来许多安全性的问题，比如，cookie一般用于状态控制，常用于存储登录的信息，如果允许跨域访问，那么别的网站只需要一段脚本就可以获取你的cookie，从而冒充你的身份去登录网站，造成非常大的安全问题，因此，现代浏览器均推行同源策略。

1.JSONP是一种比较古老的解决方案

原理：利用script标签的src不受同源策略限制，发出http请求，这种方式只支持get请求，请求到服务器后，服务器根据请求链接参数比如：jsoncallback，把请求解决当成jsoncallback的入参，并返回到客户端，由于请求的文件类型是js,所以浏览器默认会执行jsoncallback变量指定的函数，然后在客户端写一个同名的函数，就能接收到服务器的参数

下面我们手动实现一个JSONP：

 // jsonP实现

function getJSONP(url, callback) {

    const script = document.createElement('script');

    document.body.append(script);

    script.src = `${url}?jsoncallback=${callback}`;

    script.remove();

}

getJSONP('https://www.runoob.com/try/ajax/jsonp.php', 'callbackFunction')

// 回调函数实现

function callbackFunction(data){

    console.log(data);

}

2.可以通过iframe进行POST请求，具体是通过创建一个iframe，在iframe中创建一个form表单，通过表单提交到服务器，然后通过onmessage方法获取结果。

function iframePost(url,callback) {

    const iframe = document.createElement('iframe');



    const formEle = `

        <form action="${url}" id="formTest" method="POST">

            <input name="username" value="linjian" />

            <input name="jsoncallback" value="function callbackFunction(data){ window.postMessage(data,'*')};"

        </form>

        <script>

            document.getElementById('formTest').submit();

        </script>

    `;

    // iframe.innerHTML = formEle;

    iframe.style.display = 'none';

    document.body.appendChild(iframe);

    const cwin = iframe.contentWindow;

    cwin.document.write(formEle)

    // iframe.children[0].submit();

    window.onmessage = function(e) {

        if (callback) {

            callback(e.data);

        }

    }



}

iframePost('https://www.runoob.com/try/ajax/jsonp.php', function(data) {

    console.log('this is post data', data);

})

3.现代跨域解决方案可以用cores技术，core协议配合服务器请求域和请求头部支持方法设置，来完成跨域操作。

Access-Control-Allow-Origin：所允许原始的请求路径

Access-Control-Request-Method：该次请求的请求方式

Access-Control-Request-Headers：该次请求的自定义请求头字段