浏览器同源策略及跨域

• 协议必须相同
• 域名必须相同
• 端口必须相同

• ajax请求
• dom无法获取
• cookie、localStorage、indexDB无法读取

document.domain = "example.com"

Set-Cookie: key=value; domain=.example.com; path=/

document.getElementById("myIFrame").contentWindow.document
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.

• 片段标识符（fragment identifier）
• window.name
• 跨文档通信API

// 设置属性
window.name = data
// 获取属性
console.log(document.getElementById("myIFrame").contentWindow.name)

var data = window.open('https://example2.com', 'title')
data.postMessage('hello', 'https://example2.com')

window.addEventListener('message', (e) => {
    console.log(e.data)
})

• e.source：发送消息的窗口
• e.origin：接收消息的窗口
• e.data：消息内容

• JSONP
• CORS
• WebSocket

• 服务端返回的数据不是JSON，而是JavaScript，也就是说contentType是text/javascript，内容格式为callbackFunction(JSON)
• callbackFunction需要注册到window对象上，因为script 加载后的执行作用域是window作用域
• 需要考虑同时多个JSONP请求的情况，callbackFunction挂在 window上的属性名需要唯一
• 请求结束需要移除本次请求产生的script标签和window上的回调函数

jsonp({
    url: '',
    data: {
        key: 'value'
    },
    callback: (data) => {
        console.log(data)
    }
})

function jsonp ({url, data, callback}) {
    // 获取head标签
    const container = document.getElementsByTagName('head')[0];

    // 动态生成回调函数名
    const cbName = `jsonp_${new Date().getTime()}`

    // 创建script标签
    const dom = document.createElement('script')

    // 设置script标签的src属性
    script.src = `${url}?${objectToQuery(data)}&callback=${cbName}`
    script.type = 'text/javascript'

    // 插入script标签
    container.appendChild(dom)
    
    // 在window上注册回调函数
    window[cnName] = function (res) {
        callback && callback(res)
        
        // 执行完清除
        container.removeChild(dom)
        delete window[cbName]
    }
    
    // 错误兼容处理
    dom.onerror = () => {
        window[cnName] = () => {
            callback && callback('some error')
            container.removeChild(dom)
            delete window[cbName]
        }
    }
}

// 拼接参数
function objectToQuery (obj) { 
    const arr = []; 
    for ( var i in o) { 
        arr.push(encodeURIComponent(i)+ '=' +encodeURIComponent(o[i])); 
    }
    return arr.join('&'); 
}

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://example.com

• Cross-Origin-ResourceSharing，跨域资源共享。跨域请求的终极解决方案。
• 整个通信过程都是浏览器自动完成。
• 浏览器一旦发现AJAX请求跨域后，就会自动添加一些附加的头信息，有时还会多一次附加的请求。
• 只要服务端支持CORS，就可以跨域

• 请求方法为以下三种之一：

• get
• post
• head

• 头信息不超出以下几种字段：

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

1. 浏览器发现本次请求属于简单请求，自动在头部信息添加origin字段
2. 服务端根据origin字段，判断是否同意本次请求
1. 在许可范围内，响应头会新增几个头信息。

2. Access-Control-Allow-Origin: http://api.bob.com
   Access-Control-Allow-Credentials: true
   Access-Control-Expose-Headers: FooBar
   Content-Type: text/html; charset=utf-8

3. 不在许可范围内，返回一个正常的HTTP回应
4. 浏览器判断响应头中有没有 Access-Control-Allow-Origin 字段，没有的话报错，被XMLHttpRequest 的 onerror 回调函数捕获。这种错误是无法通过状态码识别，因为HTTP回应的状态码可能是200

Access-Control-Allow-Credentials：true

let xhr = new XMLHttpRequest();
xhr.withCredentials = true

1. 非简单请求在发送cors请求之前会发送一次OPTIONS请求，称为“预检”请求。
2. 浏览器先询问服务器，当前请求的域名是否在白名单中，以及可以使用哪些HTTP动词和头信息字段
3. 得到肯定回复，浏览器才会发出正式的XMLHttpRequest请求

1. 服务端收到预检请求后，检查以上三个字段，确认允许跨源请求，就可做出回应
2. 如果否定了跨源请求，服务端返回一个正常的HTTP，但是没有任何相关CORS的响应头字段。浏览器抛出错误，被XMLHttpRequest 的 onerror 回调函数捕获
3. 如果同意了跨源请求，服务端会在请求头中添加一些字段