同源策略

源：协议+域名+端口号

同源策略：运行在源A中的JS不能获取其他源中的数据，这是浏览器的功能

目的：保障数据安全、保护用户隐私

注意事项

跨域发送请求是可以的，浏览器也能正常收到响应内容（Network面板可查看）并使用它（如css、js）。同源策略是限制了在JS线程中，用AJAX请求，无法获取响应的内容，即无法得到 request.response。

跨域

突破同源策略的方法

方法一：CORS

响应头加上：

Access-Control-Allow-Origin: 允许的源

【问题】：IE 不兼容

方法二：JSONP

不用AJAX，创建一个<script>标签去请求并执行一个JS，这个JS调用一个提前定义好的全局回调函数。

为防止重复，回调名可以是一个随机数，这个回调名在请求时通过查询字符串（业内约定参数名为callback）的形式传给后端，后端返回一个JS，这个JS调用此函数，并将期望的数据作为实参。

一个JSONP的封装案例

function jsonp(url){
    return new Promise((resolve, reject)=>{
        const random = Math.random()
        window[random] = (data)=>{
            resolve(data)
        }
        const script = document.createElement('script')
        script.src = `${url}?callback=${random}` //此处查询参数名为callback，约定俗成
        script.onload = ()=>{
            script.remove()
        }
        script.onerror = ()=>{
            reject()
        }
        document.body.appendChild(script)
    })
}