九种跨域方式实现原理（完整版） (2)

JSONP都是GET和异步请求的，不存在其他的请求方式和同步请求，且jQuery默认就会给JSONP的请求清除缓存。

$.ajax({ url:"http://crossdomain.com/jsonServerResponse", dataType:"jsonp", type:"get",//可以省略 jsonpCallback:"show",//->自定义传递给服务器的函数名，而不是使用jQuery自动生成的，可省略 jsonp:"callback",//->把传递函数名的那个形参callback，可省略 success:function (data){ console.log(data);} }); 2. cors

CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

1) 简单请求

只要同时满足以下两大条件，就属于简单请求

条件1：使用下列方法之一：

GET

HEAD

POST

条件2：Content-Type 的值仅限于下列三者之一：

text/plain

multipart/form-data

application/x-www-form-urlencoded

请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器； XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。

2) 复杂请求

不符合以上条件的请求就肯定是复杂请求了。
复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。

我们用PUT向后台请求时，属于复杂请求，后台需做如下配置：

// 允许哪个方法访问我 res.setHeader(\'Access-Control-Allow-Methods\', \'PUT\') // 预检的存活时间 res.setHeader(\'Access-Control-Max-Age\', 6) // OPTIONS请求不做任何处理 if (req.method === \'OPTIONS\') { res.end() } // 定义后台返回的内容 app.put(\'/getData\', function(req, res) { console.log(req.headers) res.end(\'我不爱你\') })

接下来我们看下一个完整复杂请求的例子，并且介绍下CORS请求相关的字段

// index.html let xhr = new XMLHttpRequest() document.cookie = \'name=xiamen\' // cookie不能跨域 xhr.withCredentials = true // 前端设置是否带cookie xhr.open(\'PUT\', \'http://localhost:4000/getData\', true) xhr.setRequestHeader(\'name\', \'xiamen\') xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { console.log(xhr.response) //得到响应头，后台需设置Access-Control-Expose-Headers console.log(xhr.getResponseHeader(\'name\')) } } } xhr.send() //server1.js let express = require(\'express\'); let app = express(); app.use(express.static(__dirname)); app.listen(3000); //server2.js let express = require(\'express\') let app = express() let whitList = [\'http://localhost:3000\'] //设置白名单 app.use(function(req, res, next) { let origin = req.headers.origin if (whitList.includes(origin)) { // 设置哪个源可以访问我 res.setHeader(\'Access-Control-Allow-Origin\', origin) // 允许携带哪个头访问我 res.setHeader(\'Access-Control-Allow-Headers\', \'name\') // 允许哪个方法访问我 res.setHeader(\'Access-Control-Allow-Methods\', \'PUT\') // 允许携带cookie res.setHeader(\'Access-Control-Allow-Credentials\', true) // 预检的存活时间 res.setHeader(\'Access-Control-Max-Age\', 6) // 允许返回的头 res.setHeader(\'Access-Control-Expose-Headers\', \'name\') if (req.method === \'OPTIONS\') { res.end() // OPTIONS请求不做任何处理 } } next() }) app.put(\'/getData\', function(req, res) { console.log(req.headers) res.setHeader(\'name\', \'jw\') //返回一个响应头，后台需设置 res.end(\'我不爱你\') }) app.get(\'/getData\', function(req, res) { console.log(req.headers) res.end(\'我不爱你\') }) app.use(express.static(__dirname)) app.listen(4000)

上述代码由:3000/index.html向:4000/跨域请求，正如我们上面所说的，后端是实现 CORS 通信的关键。

给大家推荐一个好用的BUG监控工具Fundebug，欢迎免费试用！

3. postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递

多窗口之间消息传递

页面与嵌套的iframe消息传递

上面三个场景的跨域数据传递

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

otherWindow.postMessage(message, targetOrigin, [transfer]);

message: 将要发送到其他 window的数据。