前端常见的跨域解决方案

什么是跨域？

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源；

跨域了会怎么样？

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM 和 Js对象无法获得
• XMLHttpRequest 和 Fetch API 遵循同源策略

为什么会有跨域限制？

如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击；

解决跨域的方式有哪些？

1. jsonp

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

核心： jsonp的重点在于，动态创建一个script标签，src的路径中带入参数callback=json1，后面的是方法名，在服务端接口判断是否携带了callback参数，如果携带了该参数就返回一个可执行的js语句json1({“data”:“world”})，参数作为函数名来包裹住JSON数据，这样客户端接收到的时候就会执行这段可执行的js语句；

// 客户端代码
const container = document.getElementsByTagName("head")[0];
const scriptNode = document.createElement('script')
scriptNode.src = "http:localhost:8081?callback=json1"
scriptNode.type = 'text/javascript';
window['json1'] = callback
container.appendChild(scriptNode);
container.removeChild(scriptNode);
window['json1'] && delete window['json1']

// 服务端代码
if (params.query.callback) {
   
    const str = `${
     params.query.callback}(${
     JSON.stringify(data)})`;
    res.end(str); // 返回的是一串可执行代码 json1({"data":"world"})
} else {
   
    res.end()
}

缺点：

• jsonp只支持get请求而不支持post请求,也即是说如果想传给后台一个json格式的数据,此时问题就来了,浏览器会报一个http状态码415错误,告诉你请求格式不正确；
• 存在很明显的安全问题，callback参数恶意添加script标签,造成xss漏洞；
• JSONP只会发一次请求；而对于复杂请求，CORS会发两次请求；

实现： 有原生和jquery两种方式,附带上完整封装实现的代码;

• 原生方式实现

  

  let id = 0;
  
  const container = document.getElementsByTagName("head"