说说CORS与jsonp

时间 2019-11-17

标签说说 cors jsonp 栏目 JSON 繁體版

原文原文链接

前言

浏览器出于防止潜在安全风险的考虑，使用了同源策略，这一方面保证了咱们数据的安全，另外一方面却又限制了咱们的手脚，基于此，开发者们与标准制定组织提供了不一样的解决方案，这里主要说说CORS与jsonp。javascript

什么是同源策略

同源指的是两个域须要协议，子域名，主域名与端口号都保持一致，四者有一个不一样，即属于跨域。 注意: http://localhost:8080与http://127.0.0.1:8080不属于同源，也就是说，即便IP地址一致，可是一个是域名，一个是IP地址，也不属于同源。html

CORS的使用与注意点

CORS：跨域资源共享，是W3C制定的一个草案，定义了在必须访问跨源资源时，浏览器和服务器该怎么沟通。java

CORS的实现原理是，浏览器发出请求报文中会额外包含一个Origin头部，该头部的值是当前页面的源信息（协议，域名和端口），服务器收到请求报文后，若是赞成这个跨源请求，就在响应报文的头部添加Access-Control-Allow-Origin，值与请求报文中的Origin头部的值一致，若是响应报文中没有这个头部或者有，可是值不一致，此次的跨源请求就会失败。express

浏览器原生支持CORS,可是不一样的浏览器支持的方式不一样。 IE8及以上版本引用了XDR(XDomainRequest)类型，这个对象和XHR对象相似，使用这个对象，能够实现安全可靠的跨域通讯。 XDR的使用与XHR相似，使用过程以下：npm

实例化XDR

var xdr = new XDomainRequest();
复制代码

调用open()，open()接收两个参数，请求所用的方法以及URL，全部的XDR都是异步执行的，全部不须要第三个参数。

xdr.open('get','#');
复制代码

调用send()，若是使用的是get方法，传入null，若是是post方法，传入字符串。

xdr.send(null);
复制代码

为xdr绑定事件处理函数。xdr支持的事件包括load，error，timeout。须要说明一点的是，这部分的事件监听器须要在调用open()以前声明，这里只是行文须要。 4.1 load事件 在接收到响应后，你能够访问响应的原始文本，可是没有办法肯定响应的状态码，只有在响应有效的/状况下才会触发load事件，若是接收到的响应中不包含Access-Control-Allow-Origin头部的话，则会触发error事件。

xdr.onload=function(){
  console.log(xdr.resonseText);
}
复制代码

4.2 error事件 致使XDR请求失败的因素不少，全部为每一个xdr对象绑定该事件的处理函数是颇有必要的，可是该事件抛出的信息有限，咱们只能肯定请求失败了，并不能得知请求失败的缘由。json

xdr.onerror=function(){
  console.log('get a error');
}
复制代码

4.3 timeout事件 xdr对象有一个timeout属性，该属性代表请求自发出多久后超时，当为其赋值后，在给定的时间内还没接受到响应，就会触发timeout事件。跨域

xdr.ontimeout=function(){
  alert('time is too long');
}
复制代码

使用XDR须要注意的点：浏览器

cookie不会随请求发送，也不会随请求返回。
不能访问响应头部信息，这意味着xdr对象没有getResponseHeader()和getAllResponseHeaders()。
只支持get和post方法。
当使用post方法时，xdr对象有一个contentType属性，这个属性能够表示要发送的数据的格式，这是xdr对象可以影响头部信息的惟一方法。

其余浏览器对CORS的实现 其余主流浏览器经过XHR对象原生支持CORS,在尝试打开不一样来源的资源时，XML能够自动触发这个行为，有一点不一样的是，open方法中的URL参数须要传入绝对路径。缓存

使用XHR对象进行跨域通讯的注意点：安全

不能使用setRequestHeader()设置自定义头部。
不能发送和接收cookie。
调用getAllResponseHeaders()返回空字符串，调用getResponseHeader()报错。
因为同源请求和跨源请求都使用一样的接口，所以对于本地资源，使用相对URL，对跨源的资源，使用绝对路径，这样能够避免跨源请求时的限制（见1,2）。

这个给出一个例子，本地文件是index.html，服务端文件为server.js,须要注意的是，咱们须要使用http-server(其余的也能够)搭建一个静态资源服务器，关于http-server的使用，点击这里，这样可使用http协议访问index.html文件，使用file协议没法使用CORS。

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <a href="#">clcik me</a>
    </div>
</body>
<script>
    let aElement = document.getElementsByTagName('a')[0]
    aElement.addEventListener('click',cors)
    function cors(){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange=(req,res)=>{
            if(xhr.readyState==4){
                if((xhr.status>=200&& xhr.status<300)||xhr.status==304) {
                    console.log(xhr.responseText);
                    console.log(xhr.getResponseHeader('Connection'));  //null
                    console.log(xhr.getResponseHeader('content-type'))  //null
                    console.log(xhr.getResponseHeader('date'))  //null
                } else {
                    console.log('Request was unsuccessful: '+xhr.statusText);
                }
            }
        };
        xhr.open('get','http://127.0.0.1:3000/',true);
        xhr.send(null);
    }
        
</script>
</html>
复制代码

//server.js
const express = require("express");  //记得安装express

const app = express();

app.get("/", function (req, res) {
    res.setHeader('Access-Control-Allow-Origin','http://localhost:8080');
    res.end('hello world!');
});

app.listen(3000, function () {
    console.log("app is listening 3000");
});
复制代码

)

CORS的高级使用技巧

CORS支持在跨域请求的过程当中，使用自定义的头部信息，post和GET以外的方法，不一样类型的主体内容和提升凭据（cookie)。在使用这些高级选项发送请求时，浏览器会首先发送一个Prefight请求，这种请求使用options方法，这是一种透明的服务器验证机制，开发者不须要作这些。该请求须要包含如下的头部：

Origin:与简单的请求相同。
Access-Control-Allow-Method:请求自身使用的方法（是指咱们主动发起的跨域请求的方法，不是options）。
Access-Control-Request-Headers:（可选）自定义的头部信息，多个头部已逗号隔开。除了这些头部信息外，xhr有withCredentials属性，将该属性设置为true，能够在请求过程当中携带cookie。

服务器在接收到这个请求后，若是赞成此次跨域请求，就会在响应中设置响应的头部信息。这些头部信息包括：

Access-Control-Allow-Origin：与简单的请求相同。
Access-Control-Allow-Methods:容许的方法，多个方法以逗号分隔。
Access-Control-Allow-Headers:容许的头部，多个头部以逗号隔开。
Access-Control-Max-Age:应该将这个Preflight请求缓存多长事件(以秒表示）。 5.Access-Control-Allow-Credentials:布尔值。

这里给一个完整的例子：一样使用http-server搭建静态文件服务器

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <a href="#">clcik me</a>
    </div>
</body>

<script>
       let aElement = document.getElementsByTagName('a')[0]
       aElement.addEventListener('click',cors)
       function cors(){
        var xhr = new XMLHttpRequest();
        document.cookie = "name=wang";  //BOM提供的接口，用于设置当前页面所在的域的cookie
        xhr.withCredentials = true;  //容许在此次请求中携带cookie
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status == 304) {
              console.log(xhr.responseText);
              console.log('name:'+xhr.getResponseHeader("name"));   //成功接收到服务器端设置的自定义响应头
            } else {
              console.log("Request was unsuccessful: " + xhr.status);
            }
          }
        };
        xhr.open("PUT", "http://127.0.0.1:5000/getData", true);  //使用put方法
        xhr.setRequestHeader("age", 12);  
        xhr.send(null);
       }
        
        
</script>


</html>
复制代码

//server1.js
//server2.js
const Koa = require('koa');
const router = require('koa-router')();
const app = new Koa();

app.use(async (ctx, next) => {
    console.log(`Process ${ctx.request.method}: ${ctx.request.url}`)
   await next();
})


app.use(async (ctx, next) => {
    ctx.response.set('Access-Control-Allow-Origin', 'http://localhost:8080');  
    ctx.response.set('Access-Control-Allow-Headers', "age"); //自定义的头部信息
    ctx.response.set('Access-Control-Allow-Methods', "PUT");
    ctx.response.set('Access-Control-Allow-Credentials', true); 
    ctx.response.set('Access-Control-Allow-Max-Age', 6);
    ctx.response.set('Access-Control-Expose-Headers', 'name');
    // 以上这些响应头都需设置
    ctx.body = 'I am a OPTION method request'   //为option请求报文设置响应
    await next();
})

router.put('/getData',async (ctx,next)=>{
    console.log('request header:'+ctx.request.header.age);
    ctx.response.set('name','wang');   //设置自定义响应头
    ctx.body='success put request';
    await next();
})
app.use(router.routes());

app.listen(5000, () => {
    console.log('app is listening at port 5000');
});
复制代码

运行以上server1.js件，访问http://localhost:8080。

1.服务器端运行结果以下，能够看到，服务器端在客户端一次跨域请求中，接收到两条不一样方法的请求，且成功接收到客户端自定义的头部信息。

2. 此为option请求响应相关信息

3.这是客户端经过option请求与服务器端进行沟通后，进行的put请求(该请求中才是客户端真正需求的载体)

从以上的图片中，能够看到，在进行跨域请求时，携带了cookie，而且浏览器在后台替咱们发送了一个options方法的请求。

总结：CORS的高级用法其实就是在真正与服务器进行跨域通讯时，浏览器会先发送一个options方法的请求，帮咱们跟服务器进行‘沟通’，基于沟通结果，决定咱们真正须要的跨域通讯的成功或失败。

jsonp

jsonp利用script标签能够不受限制的从其余域加载资源的能力，进行跨域通讯。 jsonp由两部分组成：回调函数和数据。回调函数是响应带来时，应该调用的函数，它须要在URL中指定；数据就是服务器返回给浏览器的响应。

jsonp的使用：

建立一个script元素。
声明一个回调函数。
为script指定src属性的值，须要将回调函数做为URL的查询字符串，形式为：'callback=functionName' 这里给出一个完整的例子

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <script> var script = document.createElement('script'); //回调函数 var blog = function(str){ console.log(str); } script.src='http://localhost:3000/?callback=blog'; document.body.appendChild(script); </script>
</body>
</html>
复制代码

//server.js
const Koa = require('koa');
const app = new Koa();
const router = require('koa-router')();

router.get('/',async(ctx,next)=>{
    var name = ctx.request.querystring.split('=')[1];
    console.log(name);
    var value='hello world!';
    ctx.body = `${name}('${value}')`;
})

app.use(router.routes());

app.listen(3000,()=>{
    console.log('app is running at port 3000');
})
复制代码

其实jsonp的内在逻辑很简单，在script标签中声明的函数是属于全局的，当服务器返回字符串后，这个字符串会被当作JavaScript代码执行，也就是调用以前声明的函数。 ##总结 CORS属于浏览器原生支持，支持全部类型的HTTP请求，是跨域通讯的根本解决方案。 jsonp是开发者们为了绕开同源策略的权宜之计，虽然只支持get方法，可是使用简单。

总结

CORS属于浏览器原生支持，支持全部类型的HTTP请求，是跨域通讯的根本解决方案。 jsonp是开发者们为了绕开同源策略的权宜之计，虽然只支持get方法，可是使用简单。

参考

高程
九种跨域方式实现原理