JavaScript的跨域方法
一、为什么会产生跨域
同源策略是对XHR(XMLHttpRequest)的一个主要约束，它为通信设置了“相同的域、相同的端口、相同的协议”这一限制。试图访问上述之外的资源，都会引发安全错误，除非采用被认可的跨域解决方案。
二、跨域的解决方案
- CORS(Cross-Origin Resource Sharing,跨域资源共享)
- 图像ping
- JSONP
- web sockets ：全双工、双向通信
- postMessage
1、CORS(Cross-Origin Resource Sharing,跨域资源共享)
CORS 是使用自定义的HTTP头部让浏览器和服务器进行沟通，从而决定请求或响应是否成功。
例如：一个简单的使用GET 或POST发送的请求，它没有自定义的头部，而主体内容是 text/plain。在发送该请求时，需要给它附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。
如： Origin: http://www.xxxx.com
如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的源信息： Access-Control-Allow-Origin: http://www.xxxx.com
如果没有这个头部，或者有这个头部的源信息不匹配，浏览器会驳回请求。
2、图像ping
我们知道，一个网页可以从任何网页中加载图像，不用担心跨域问题。
图像ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应（等同于请求成功，但没有数据）。
通过图像ping，浏览器得不到任何具体数据，但通过侦听load和error事件，它能知道是什么时候接收到的。
例如：
图像ping最常用于跟踪用户点击页面或动态广告曝光次数。
图像ping有两个主要缺点：一是只能发送get请求，二是无法访问服务器的响应文本。因此图像ping只能用于浏览器与服务器的单向通信。
3、JSONP（JSON with padding）
JSONP由两部分组成：回调函数和数据。
- 回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般在请求中指定。
- 数据是传入回调函数中的JSON
例如：
JSONP优点：能够直接响应文本，支持在浏览器与服务器之间双向通信。
JSONP缺点：一是JSONP是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码。二是要确定JSONP请求是否失败并不容易。
4、web sockets ：全双工、双向通信
5、postMessage
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文档、多窗口、跨域消息传递。
网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
相关文章
-
谈谈javascript中编程实现以及使用内置方法实现进制转换
2023-12-25
64012 浏览
方法一：自己写逻辑实现说到javascript下进制转换，可能你会想到自己编程实现：比如以下方法，是本人编写的将十进制转为二进制的方法：functiontoBinary(num){varresult=''while(num>=1){if(num%2==0){result+=0;}else{result+=1;}num=num/2;}returnresult.split('').reverse().
-
[网页编程]-13 javascript BOM对象中常用的方法
2023-12-27
64808 浏览
注意,下面所有方法中的Window是可以省略的弹窗第一种只有确定按钮
-
javascript 添加包含事件的元素的方法
2023-12-26
63111 浏览
<em class="color_r">javascript</em>鼠标事件偏移量的研究 -
关注我们
扫一扫关注公众号
添加我为好友，拉您入交流群！
添加我为好友，拉您入交流群！
请使用微信扫一扫!
-