JSONP CORS WebSocket

honhon 发布于2019-08-21 17:34 / 1895人阅读

摘要：下表给出了相对于同源检测的结果跨域解决方法由两部分组成回调函数和数据。回调函数时当响应到来是应该在页面中调用的函数，名字一般在请求中指定。

何为跨域？

一般情况下，XMLHttpRequest（XHR）对象只能访问与包含它的页面位于同一个域中的资源，这种安全策略可以预防某些恶意行为，即通常所说的同源策略。

只要协议、域名、端口号有任何一个不同，都会被当成不同的域。

下表给出了相对于 http://store.company.com/dir/... 同源检测的结果：

跨域解决方法

JSONP（JSON with padding）
JSONP由两部分组成：回调函数和数据。回调函数时当响应到来是应该在页面中调用的函数，名字一般在请求中指定。而数据就是传入回调函数中的JSON数据。
JSONP通过动态创建
如果Origin指定的源在许可范围内，服务器返回响应的头信息会增加如下几个字段：
Access-Control-Allow-Origin：必须，表明可以同意哪些跨源请求，设置为*表明同意任意跨源请求
Access-Control-Allow-Credentials：可选，布尔值，表明服务器是否允许浏览器携带用户凭证相关信息，例如cookie、http认证等信息。CORS请求默认不发送Cookie和HTTP认证信息，如果要发送需要将 withCredentials属性设置为true。如果服务器不返回该字段，即不允许，此时若浏览器发送了一个withCredentials属性为true的请求，则会被拒绝，在控制台报错。

非简单请求：
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight），询问当前网页所在的域名是否在服务器的许可名单之中，以及可以使用那些http方法及头信息字段。只有得到肯定的答复，浏览器才会正式发出XMLHTTPRequest请求。
预检请求使用的http方法是Options，表示这是个用来询问的请求。 http请求头中除了包含简单请求头中的origin字段，还包含几个特殊字段：
Access-Control-Request-Method：表明请求使用的HTTP方法
Access-Control-Request-Headers：用于在预先请求时，告知服务器要发起的跨域请求中会携带的请求头信息，是一个以逗号分隔的字符串
如果服务器确认允许跨源请求，则可以做出回应。
预检请求的回应除了简单请求的回应中的Access-Control-Allow-Origin字段外，还有几个特殊字段：
Access-Control-Allow-Methods：表明服务器支持的所有跨域请求的方法，返回所有可以避免多次预检请求
Access-Control-Allow-Headers：表明跨域资源可以携带的自定义表头列表
Access-Control-Max-Age：表明浏览器可以将相应结果进行缓存的时间（单位为秒），在缓存时间内可以不用重复发送预检请求

如果服务器否定了预检请求，会返回一个正常的HTTP相应，但是没有任何有关CORS的头信息字段。这时浏览器就会认定服务器不同意预检请求，会触发一个错误，在控制台报错.

只要服务器通过了预检请求，以后每次正常的CORS请求，就跟简单请求一样。
CORS优点：1. 相比于JSONP，不仅支持get请求，也支持post、put等请求。
CORS缺点： 1. 不是所有的浏览器都支持 2. 需要服务器支持

CORS浏览器兼容情况：

WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工双向通讯的协议，同源策略对 Web Sockets 不适用，因此可以实现异步跨域请求。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
客户端在收到服务器响应后，建立的连接会从 HTTP 协议交换为 Web Socket 协议。标准的 HTTP 无法实现 Web Sockets，只有支持这种协议的专门服务器才能正常工作。 http:// => ws://、https:// => wss://使用自定义协议的好处是在服务器和客户端之间发送的数据量小，不必担心 HTTP 那样字节级的开销，比较适合移动通信及对实时性要求较高的应用。

    // 要创建 Web Socket,需要先实例一个 WebSocket 对象并传入服务器端的地址，必须为一个绝对URL：
    var socket = new WebSocket("ws://echo.websocket.org");
 
    // 当浏览器和服务器连接成功后，会触发 open 事件
    socket.onopen = function(evevt){
        console.log("open");
    }
    // 当服务器向客户端发来消息时，会触发 message 事件
    socket.onmessage = function(event){
    var data = event.data; // 返回的数据是字符串
        console.log(data);
    }
    // 当浏览器收到服务器发送的关闭连接请求时，就会触发 close 事件
    socket.onclose = function(event){
        console.log("close");
    }
    // 如果连接失败，发送、接收数据失败或者处理数据出现错误，会触发 error 事件
    socket.onerror = function(event){
        console.log("error");
    }
    // 使用send方法像服务器发送数据(只能发送纯文本数据，复杂的数据结构需要JSON.stringify一下)：
    socket.send("Hello World");

注：WebSocket对象不支持DOM2级事件侦听器，必须使用DOM0级事件语法。

**WebSocket缺点：** 1. 不是所有的服务器都支持  2. 必须有相应的服务器支持。
**WebSocket优点：**1. 支持实时通信，可以避免浏览器的短轮询及服务器的长轮询。 2. 长连接会带来一定的服务器内存开销

WebSocket浏览器兼容情况：

参考文档

《javascript 高级程序设计》第21章跨源资源共享

阮一峰：跨域资源共享CORS详解

CORS测试网站：http://test-cors.org

云服务器私有云 CORS 服务器 cors cors 登陆服务器 flask-cors

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89691.html

JS跨域

摘要：跨域概述两个不同域互相请求，称为跨域，是由浏览器同源策略限制的一类请求场景。同源策略限制以下几种行为和无法读取无法获得请求不能发送目前主流的用于解决跨域问题的方法跨域缺点这种方法只适用于和窗口，和无法通过这种方法。跨域概述两个不同域互相请求，称为跨域，是由浏览器同源策略限制的一类请求场景。 --> 同源策略/SOP（Same origin policy）是浏览器最核心也最基本的安全...

whataa 2019-08-22 15:25 评论0 收藏0
浏览器同源政策以及JS跨域

摘要：浏览器同源政策以及跨域同源是指协议相同域名相同端口相同。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。参考文献浏览器同源政策及其规避方法详解跨域问题浏览器同源政策以及JS跨域同源是指协议相同、域名相同、端口相同。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。同源策略主要限制下面...

zeyu 2019-08-20 18:16 评论0 收藏0
浅谈前端跨域

摘要：一什么是跨域跨域简单的理解就是同源策略的限制。同源策略限制的内容请求不能正常进行。同源策略默认地址是网页的本身。一、什么是跨域？跨域简单的理解就是JavaScript同源策略的限制。是出于安全的考虑，a.com域名下的js不能操作b.com或者c.com域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算叫跨域。一个正常...

dunizb 2019-08-26 13:55 评论0 收藏0
关于跨域的总结

摘要：关于跨域，个人总结了以下几种方法其中等方法常用，的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。这个主要针对跨域访问的情况两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置共享。关于跨域，个人总结了以下几种方法 JSONP CORS WebSocket document.domain window.name location.hash postMessa...

lunaticf 2019-08-22 18:47 评论0 收藏0
浏览器同源策略，及跨域解决方案

摘要：三哪些会受到同源策略限制对于浏览器来说，除了会受到同源策略的限制外，浏览器加载的一些第三方插件也有各自的同源策略。九的现代浏览器允许脚本直连一个地址而不管同源策略。一、Origin（源）源由下面三个部分组成：域名端口协议两个 URL ，只有这三个都相同的情况下，才可以称为同源。下来就以 http://www.example.com/page.html 这个链接来比较说...

scq000 2019-08-23 12:08 评论0 收藏0