CORS(Cross-origin resource sharing)跨域资源共享

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS的简单请求

请求头信息。服务器根据Oringin值，决定是否同意这次请求。

//请求头信息
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Access-Control-Request-Method: POST
Connection: keep-alive
Host: video-yyy.com.cn
Origin: http://xxx.com.cn
Referer: http://xxx.com.cn/index.php?r=app/update&id=123
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36

服务器响应请求：浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

//响应头信息
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://xxx.com.cn
Connection: keep-alive
Content-Type: application/json; charset=UTF-8
Date: Wed, 19 Aug 2020 01:26:52 GMT
Server: Tengine/2.1.2
Transfer-Encoding: chunked
X-Powered-By: PHP/7.0.15

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

有几个字段与CORS请求相关字段，都以Access-Control-开头

Access-Control-Allow-Origin，必选。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求
Access-Control-Allow-Credentials，可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可
Access-Control-Expose-Headers，可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿基本字段。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定

//服务器端
Access-Control-Allow-Credentials: true

//客户端，默认值是false
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

CORS的非简单请求

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求。

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

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = onProgress;
xhr.onabort = e => reject(e);
xhr.onerror = e => reject('网络问题');
xhr.onload = e => {};
xhr.open('POST', url);
Object.keys(headers).forEach(key =>
    xhr.setRequestHeader(key, headers[key])
);
xhr.withCredentials = true;
xhr.send(data);

浏览器发现，这是一个非简单请求，就自动发出一个"预检"请求，要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息:

OPTIONS /cors HTTP/1.1

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header
...

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。"预检"请求的头信息包括两个特殊字段

Access-Control-Request-Method，用来列出浏览器的CORS请求会用到哪些HTTP方法
Access-Control-Request-Headers，该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段

服务器的响应信息:

Access-Control-Allow-Methods: GET, POST, PUT,OPTIONS
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

Access-Control-Allow-Methods，表明服务器支持的所有跨域请求的方法
Access-Control-Request-Headers，如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段
Access-Control-Max-Age，用来指定本次预检请求的有效期，单位为秒。

如果服务器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

JSONP

CORS与JSONP的使用目的相同，CORS更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

Web页面上调用js文件时则不受是否跨域的影响，不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>

function myJsonp(url){ 
    return new Promise(function(resolve, reject){
        let script = document.createElement('script')//创建script标签
        let callbackName = 'callback' + Date.now()//设置调用函数名
        window[callbackName] = function (data) {
            resolve(data);
        }
        script.src = `${url}&callback=${callbackName} `
        script.onload = function (e) {
            e.currentTarget.remove()
            delete window[callbackName]
        }
        script.onerror = function (e) {
            e.currentTarget.remove()
            delete window[callbackName];
            reject('error');
        }
        document.body.appendChild(script)
    }) 
}
window.onload = function () {
  	myJsonp('http://xxx.com.cn/index.php').then(function(data){
    	console.log(data);
    }).catch(function(err){
    	console.log(err);
    })
}

上面代码通过动态添加<script>元素，向服务器xxx.com.cn发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的

服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

callback1597807243237({"ip": "8.8.8.8"});

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。

它只支持GET请求而不支持POST等其它类型的HTTP请求，因为script标签的scr只能进行GET请求
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题
jsonp在调用失败的时候不会返回各种HTTP状态码
缺乏安全性。假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的,那么所有调用这个jsonp的网站都会存在漏洞，这样的话危险就不止在一个域名下

webSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://xxx.com.cn

有一个字段是Origin，服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应


HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

参考链接

阮一峰老师的跨域资源共享 CORS 详解
阮一峰老师的浏览器同源政策及其规避方法

跨域请求CORS、JSONP、webSocket