百网思正是上线了。欢迎围观

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

前端 sinalmq 496浏览 0评论

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

何时需要跨域

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

跨域的四种方法

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 (Cross-Origin Resource Sharing)

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 跨域的几种实现方式

喜欢 (1) or 分享 ( 0)

发表我的评论

您尚未登录,请 登录注册 后评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(0)个小伙伴在吐槽