JSONP

介绍

JSONP是利用浏览器对script的资源引用没有同源限制，通过动态插入一个script标签，当资源加载到页面后会立即执行的原理实现跨域的。

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

实现

用户名:<input type="text" id="username">
    <p></p>
    <script>
        // 获取input元素
        const input = document.querySelector("input")
        const p = document.querySelector("p")
        // 声明 handle 函数
        function handle(data){
            input.style.border = "solid 1px #f00"
            // 修改p标签的提示文本
            p.innerHTML = data.msg
        }
        // onblur是失去焦点事件
        input.onblur = function(){
            // 获取用户输入值
            let username = this.value
            // 向服务端发送请求 检测用户名是否存在
            // 创建一个script标签
            const script = document.createElement("script")
            // 设置标签的src属性
            script.src = "http://127.0.0.1:8000/check-username"
            // 将script插入到文档中
            document.body.appendChild(script)
        }
    </script>

// 用户名检测是否存在
app.all("/check-username",(request,response)=>{
    // response.send("console.log('hello jsonp')")//发送js代码才能够解析
    const data = {
        exist:1,
        msg:"用户名已经存在"
    }
    // 转字符串
    let str = JSON.stringify(data)//str是JSON格式字符串
    // 返回结果
    response.send(`handle(${str})`)
})

cors

介绍

CORS是现代浏览器支持跨域资源请求的一种方式，全称是"跨域资源共享"（Cross-origin resource sharing），当使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

Access-Control-Allow-Origin: 允许访问的域名
Access-Control-Allow-Methods: 允许使用的请求方法
Access-Control-Allow-Headers: 允许使用的请求头

第一个，没问题，很合理。因为我确实要限制非法网站过来的请求
第二个，也没毛病。因为确实存在，某些controller只支持特定的HTTP方法。Restful接口中这种限制体现得尤为明显。

cors缺点

问题出在第三个
这个是用来告诉前端，我允许你接下来的请求附带哪些请求头。或许换个说法更容易暴露它的不合理，就是，我服务器支持哪些请求头。需要注意的是，这里必须把所有支持的请求头都填上。天呐，要知道，所有的HTTP请求头，基本的，常见的，不常见的，加起来有几十个呢。

如果服务器要全部支持，就要把所有的请求头都填进去。这将是非常枯燥，而且不必要的工作。
会产生额外的请求

cors预检请求解决的问题

在讲服务器的支持逻辑之前，先讲个扩展话题。浏览器限制跨域请求，实际上有两种方式：
---请求正常发起，拦截返回数据
---在请求发起前拦截住

事实上，绝大多数浏览器都是采用第一种方式。
CORS规范就是为了填补这个漏洞，主要手段是使用预检请求。

原理

浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。

简单请求

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

（1) 请求方法是以下三种方法之一：

HEAD
GET
POST

（2）HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

当浏览器发现发启的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务器会根据这个值决定是否允许其跨域。

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

Access-Control-Allow-Origin: manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8

Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*，代表任意
Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

注意：

如果跨域请求要想操作cookie，需要满足3个条件：

服务端的响应头中需要携带Access-Control-Allow-Credentials并且为true。
浏览器发起ajax需要指定withCredentials 为true
响应头中的Access-Control-Allow-Origin一定不能为*，必须是特定的域名

特殊请求

不符合简单请求的条件，会被浏览器判定为特殊请求

特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

与简单请求相比，除了Origin以外，多了两个头：

Access-Control-Request-Method：接下来会用到的请求方式，比如PUT
Access-Control-Request-Headers：会额外用到的头信息

服务端收到预检请求，如果许可跨域，会发出响应：

除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，这里又额外多出3个头：

Access-Control-Allow-Methods：允许访问的方式
Access-Control-Allow-Headers：允许携带的头
Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了

如果浏览器得到上述响应，则认定为可以跨域，后续就跟简单请求的处理是一样的了。

postmessage

zhuanlan.zhihu.com/p/445019033

JSONP和cors跨域优缺点