前言

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

什么是同源策略

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

CORS的使用与注意点

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

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

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

实例化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对象绑定该事件的处理函数是很有必要的，但是该事件抛出的信息有限，我们只能确定请求失败了，并不能得知请求失败的原因。

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方法，但是使用简单。

参考

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