zoukankan      html  css  js  c++  java
  • 跨域的几种方式

    跨域的几种方式

    • CROS
    • 图像Ping
    • JOSNP
    • Comet
    • Web Sockets
    • HTML5 postMessage

    CROS(Cross-Origin Resource Sharing): 跨域资源共享

    原理是自定义HTTP头部Origin,这个部分由浏览器控制,这个过程与cookie无关。
    例如:Origin: http://www.abc.com

    服务器判读Origin的值是否在自己白名单当中,如果是,返回Access-Control-Allow-Origin: "http://www.abc.com"

    当访问服务器的资源为公共资源时,也就是服务器不限制请求来源时,返回Access-Control-Allow-Origin: "*"

    图像Ping

    原理是创建一个实例,设置src进行单向通信,只能发送GET请求

    var img = new Image();
    img.onload = img.onerror = function() {
        alert("Ok");
    }
    img.src = "http://www.abc.com"
    

    JSONP

    原理是通过动态创建script标签完成

    function handler(res) {
        console.log("The content:", res);
    }
    var script = document.createElement("script");
    script.src = "http://www.abc.com?callback="handler"";
    document.body.insertBefore(script, document.body.firstChild);
    

    Comet

    是一种服务器向页面推送数据技术。

    有两种实现方式:长轮询HTTP流

    长轮询

    浏览器向服务器发送连接请求,浏览器就一直保持连接打开状态,服务器有数据时便发送数据到浏览器,浏览器关闭连接。然后再次发送连接请求。

    HTTP流

    浏览器向服务器发送一次连接请求,服务器一直保持连接打开状态。浏览器即使接受数据了也不会断开连接。

    SSE(Server-Sent Event): 服务器发送事件

    围绕着Comet推出的API

    var source = new EventSource(url); //url 必须与source创建对象的页面同源。
    source.onmessage = function(event) {
        var data = event.data;
        // 处理数据
    }
    source.close(); // 手动关闭连接
    

    Web Sockets

    在一个单独的持久连接上提供全双工、双向通信。

    wx:// 或 wss:// 为协议名

    var socket = new WebSocket("ws://www.abc.com/1.php");
    // 成功连接后
    socke.onopen = function(){
        alert("Connect Success");
    }
    
    // 连接发生错误
    socket.onerror = function(err) {
        alert("Connect Failed ", err);
    }
    
    // 发送数据
    socket.send("Test message");
    
    // 接受数据
    socket.onmessage = function(event) {
        var data = event.data;
        // 处理数据
    }
    
    socket.close() // 关闭socket连接
    

    HTML5 postMessage

    HTML5 window.postMessage 是一个安全的、基于事件的消息API,可用于html内嵌iframe、window.open()新窗口之间的通信。

    //发送信息

    window.postMessage(msg, url);

    //接收postMessage信息

    window.addEventListener("message", func, false);
    function func(event) {
        var data = event.data;
        // 处理数据
    }
    
  • 相关阅读:
    BBED Structure
    Git 入门操作笔记总结
    archive_a: 2017/10
    (数论六)关于欧拉(定理、公式、函数、降幂)
    ES6解构
    生成天气预报网站
    vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }
    express中的中间件(middleware)、自定义中间件、静态文件中间件、路由中间件
    jQuery的ajax请求express服务器返回数据
    express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用
  • 原文地址:https://www.cnblogs.com/miku561/p/10500537.html
Copyright © 2011-2022 走看看