关于跨域用的最多的场景应该就是面试了？同意不

何时需要跨域

通常情况在项目开发中都是在同一个网站进行，大家都是自己人，相互信任，相互帮助，想要什么自己拿，但是社会是一个小群体和大群体组成，自己人和其他的群体的自己人组成的，用时候我们需要为其他人（其他网站其他源）提供帮助，同样有有时候也需要他人帮助（获取其他网站数据），于是就产生了外交（跨域），当然这种情况不像自己人了。想拿什么就拿什么；需要一些方法或者谈判技巧才能获取别人家的数据，协商一致

跨域的四种方法

JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

特点： 1. 支持任何网站调用也就是跨域 2. 需要知道服务器接受的参数从而产生回调函数 jsoncallback=handleResponse 3. 只能通过动态创建script标签完成加载因此只能支持get请求

  function handleResponse(response) {
      console.log(response[0]);
      console.log(response[1]);
  };
  window.onload=function () {
      var script=document.createElement("script");
      script.src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=handleResponse";
      document.body.appendChild(script);
  }

上例子中服务器端接受参数jsoncallback ，获取到handleResponse，从而把json 传递给handleResponse，然后在客户端执行回调

CORS到实现方式依据浏览器到安全规则实现，需要服务器端配合设置，简单原理是依据HTTP头部信息机制通过orgin 发送当前源请求的信息，浏览器会自动完成，服务器端解析之后作出判断，返回到客户HTTP头部信息添加 Access-Control-Allow-Origin标示同意，如果不同意就不返回，当然复杂的还可以添加跟多认真，详细可见《ajax核心技术 XMLHttpRequest 对象》

let xhr = new XMLHttpRequest();
   xhr.onload= function(){
     if(xhr.status === 200){
       console.log(xhr.responseText);
     }
   }
   xhr.open('get','https://www.baidu.com/sugrec?prod=pc_his');
   xhr.send(null);

CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 这是看到的返回结果，因为百度并不支持我去跨域请求。因为它和我不熟如果服务器配置了Access-Control-Allow-Origin 那么请求的方法就像自己家一样，可以用get可以用post 发送和查询数据，目前用的也比较广泛当然还有更厉害的

通过代理实现跨域

通过代理实现，是目前最流行的，前后端的分离也是基于代理实现生产环境使用代理比如node、nginx 开发环境如果是webpack那么可以配置自己的开发代理比如：webpack-dev-server，通过配置就可以代理：用代理的好处，完全像自己家一样，想怎么用都可以 nginx 基础配置

server {
        # 本地端口
        listen       8888;
        server_name  localhost;
        # 本地代码地址
        root F:/.../statichtml;
        // 配置代理的地址
        location /{
                    proxy_pass https://www.baidu.com/sugrec?prod=pc_his;
                }  
     }

其他的使用nginx 默认文件就可以

webpack的代理

 devServer: {
   // 本地代码
    publicPath: `F:/.../statichtml;`,
    // 访问的主机
    host: '',
    compress: true,
    // 本地端口
    port: 1443,
    hot: true,
    // 代理地址配置
    proxy: {
      '/xxx': {
         target: 'http://xxxxx/', // 测试环境
      }
    }

需要配置的东西都差不多，配置的名字地方不一样。简单版本配置

postMessage跨域

这个实现跨域 h5新提出来的一个api，其实是一种跨页面的 iframe 传输网上搞的例子，应付面试就够了。一般用不上

<body>
    <h1>a yemian</h1>
    <iframe src="http://localhost:8082/b.html" id="iframea"></iframe>
</body>
<script>
/* a 页面使用postmessage 像 iframe 的b页面传送数据 */
let iframe = document.getElementById('iframea')

iframe.onload = function () {
    var message = {name: 'czklove'};
    /* 像 http://localhost跨域传送数据*/
    iframe.contentWindow.postMessage(JSON.stringify(message),'http://localhost:8082/')
}
window.addEventListener('message',function(e){
    console.log('message-----' + JSON.parse(e.data).name)
},false);
</script>
</html>

页面二

<body>
    <h1>zheshi第二个页面</h1>
</body>
<script>
    /* 接受数据 */
    window.addEventListener('message',function(e){
        var message = JSON.parse(e.data);
        console.log('b已经接收到了数据'+message.name)
        if(message) {
            message.name='ljkjkjk';
            window.parent.postMessage(JSON.stringify(message),'http://localhost:8081')
        }
    },false)
</script>
</html>

欢迎给我点赞，我好好写

转载请注明：百网思 » 浅谈JavaScript 跨域的几种实现方式

浅谈JavaScript 跨域的几种实现方式

何时需要跨域

跨域的四种方法

JSONP

通过代理实现跨域

postMessage跨域

发表我的评论

Hi，您需要填写昵称和邮箱！

何时需要跨域

跨域的四种方法

JSONP

跨域资源共享 CORS （Cross-Origin Resource Sharing）

通过代理实现跨域

postMessage跨域

发表我的评论

Hi，您需要填写昵称和邮箱！