跨域

最新推荐文章于 2024-04-22 13:41:54 发布

花江夏树

最新推荐文章于 2024-04-22 13:41:54 发布

阅读量160

点赞数

本文链接：https://blog.youkuaiyun.com/onepunchmen00/article/details/82704041

版权

1.js中使用jsonp
原理：客户端通过script标签的src属性向服务端发送请求，服务端返回一个js形式的数据内容，客户端通过执行函数接收数据内容。
缺点：①只能发送GET请求，复杂的请求内容无法提交。
②必须保证服务端返回的数据内容能被js处理

 var btn = document.getElementById('btn'),
        store = document.getElementById('store'),
        tempDOM = null;
    btn.addEventListener('click', getScript);
  function getScript() {
        var src = 'http://sub.local.com/data.js';
        tempDOM = document.createElement('script');
        document.body.appendChild(tempDOM);
        tempDOM.src = src;
    }

    function loadData(data) {
        store.innerHTML = JSON.stringify(data, null, 2);
        document.body.removeChild(tempDOM);
    }

参考https://www.cnblogs.com/lanyueff/p/7771075.html

2.jquery中使用jsonp

//1.$.ajax
    $.ajax({
        url: '需要跨域的链接',
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'LookAtMe', //回调函数命名为lookAtMe
        success: function (data) {
            store.innerHTML = JSON.stringify(data, null, 2);
        }
    })

这个例子里面，明确指定了jsonp: "callback"以及jsonpCallback:"ooo"。我们分别说一下：

jsonp: "callback"你的里写回调，那么jQuery发送请求的时候路径里就用callback = jsonpCallback：“ooo”是设置函数名。你这里写ooo，那么php必须返回ooo为函数名的内容。这两者都可以省略，JSONP的值省略的话，缺省是callback.jsonpCallback的值省略的话，缺省是类似jsonp3731491014413739这样的’JSONP’加16位随机数。两者都省略的话，jQuery的就会在路径后面接一个callback = jsonp3731491014413739这样的参数，那么，你的php就必须返回jsonp3731491014413739（{“name”：“张学友”}）这样的字符串。说白了，你如果js端想少几几个字，打算省掉这两个参数，那么PHP端就多写一些代码，需要先获取$ _GET [ ‘回调’]的值，根据值拼接字符串，因此你就不可能写死函数名。最佳实践是省掉这两个参数，不过你的PHP端就要对参数值做安全措施。

 //2.$.get 推荐写法
    $.get('需要跨域的链接', {各种数据}, function (data) {
        store.innerHTML = JSON.stringify(data, null, 2);
    }, 'jsonp');

这个写法其实就是上面AJAX写法的简化版，而且肯定设不了JSONP和jsonpCallback，所以你的PHP用必须类似echo $_GET['callback'].'({"name":"张学友"})';这样的写法。假如你的路径中本来就有回调参数，而且这个回调是干别的用的，那么你就没法用$获得（）方法因为你真正的请求路径会是：HTTP：//外域/xxx.php?callback=12345678&callback=jQuery321040155744415047234_1498133674752&_=1498133674753，看到了吧，两个回调参数， PHP只会认后一个，忽略前一个。

参考 https://www.jianshu.com/p/1efe671832e0

3.iframe + domain方案
步骤：客户端设置domain，将表单提交到iframe，服务端返回设置的domain并嵌入数据。

缺点：①由于数据是嵌入到网页中的，流量消耗大。
②仅支持主域名相同的情况下的跨域

4.cors方案
优点：①支持多种请求方式
②支持主域名不同的情况的跨域
③数据包装简单

cors方法是在服务器php文件里添加header（’Access-Control-Allow-Origin：*’）

补充
CORS中的简单请求与复杂请求
1。复杂请求会先发送一次选择方法的预检请求
2.简单请求需要同时满足条件：
①请求方法必须为HEAD GET POST中的一种
②请求头中的字段为接受内容类型等五个字段中
③ content-type值有限制应用等等

响应头字段的设置Access-Control-Allow-Origin表示允许访问的域名*表示任意域名
Access-Control-Allow-Credential值设置为true只能为真表示允许向服务器发送cookie客户端需要设置xhr的withCredentials为true Access-Control-Allow-Origin必须为指定域名

// Access-Control-Allow-Header表示服务器接受的跨域请求字段多个字段逗号分隔请求头含Access-Control-Request-Header（预检请求时会有）时必须设置allow-header
//访问 - Control-Max-Age表示缓存预检结果秒为单位在此期间不再发送预检请求