什么是跨域 & 跨域解决方案

什么时跨域：

跨域是指一个区域下的文档或脚本试图去请求另一个域的资源，这里的跨域时广义的。

广义的跨域：

• 资源跳转：A链接、表单提交。
• 资源嵌入： 一般为dom标签，引用外链文件。
• 脚本请求：js发起的Ajax请求、dom和js对象的跨域操作等。

一般我们所说的跨域都时狭义的，指有浏览器的同源策略限制请求的场景。

同源，也叫同源策略：

同源策略是一种约定，由Netscape公司引入浏览器，是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，浏览器很容易受到攻击。所谓同源是指“协议+域名+端口”三者相同，即便两个不同的域名指向同一个IP，也不是同源。

同源策略限制的几种行为：

• Cookie、LocalStorage和IndexDB无法读取。
• DOM和JS对象无法获得。
• AJAX请求不能发送

跨域解决方案

1、通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

<script>
    const random='frankJSONPCallbackName'+Math.random()
    window[random]=(data)=>{
    console.log(data)
}
    const script = document.createElement('script')
    script.src = `http://qq.com:8888/friends.js?functionName=${random}`
    script.onload=()=>{
     script.remove()
    }
 document.body.appendChild(script)
</script>

2、CORS跨域

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页

const request = new XMLHttpRequest(); 
request.open("GET", 'http://qq.com:8888/friends.json');
 request.onreadystatechange = () => {
     if (request.readyState === 4 && request.status === 200) {
         console.log(request.response)
     }
 }
 request.send()