Web前端开发,必须要了解的跨域解决方案

文章目录

    • 跨域
        • 1、怎么算跨域
        • 2、浏览器具体是如何做到的
    • Web中的四种跨域的解决方案
        • 1、JSONP
        • 2、websocket通信
        • 3、CORS通信
        • 4、服务器代理
        • 5、document.domain
        • 6、iframe可通过postMessage实现跨域通信
    • [跨域基础知识]简单请求和复杂请求(是否触发预检)

跨域

1、怎么算跨域

请求地址与当前页面访问地址中的协议、域名或IP、端口全部一致则称为同源,
若有一个不一致则不同源,也就是跨域。

2、浏览器具体是如何做到的

具体实现方式就是,XMLHttpRequest和Fetch这两个API都部署了同源限制

Web中的四种跨域的解决方案

1、JSONP
  • 原生写法
<script src="http://domain/api?param1=6&callback=jsonp"></script>
<script> 
    function jsonp(data) {
        console.log(data)
    }
</script>
  • 封装后写法
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};
  • JSONP的具体流程

    • 第一步,网页添加一个

你可能感兴趣的:(javascript,前端跨域解决方案)