AJAX四种跨域处理方法

同源策略

同源策略

同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
具体定义是:一段脚本向后台请求数据,只能读取属于同一协议名、同一主机名、同一端口号下的数据。因此,请求不同协议名、不同主机名、不同端口号下的文件,违背同源策略,无法请求成果,需要进行跨域处理。
同源策略限制的具体行为:
(1)Cookie、LocalStorage、IndexDB无法读取;
(2)DOM无法获得;
(3)AJAX请求不能发送。

什么是跨域?

两个页面之间的请求,协议、域名、端口都必须相同,才算在同一个域,否则就是跨域。
直接通过FORM表单提交的post/get请求不受同源策略限制,因此需要设置csrf_token防范CSRF攻击。

跨域处理方法

CORS——服务端放开跨域限制(即XHR2)

CORS,Cross-Origin Resource Sharing,跨域资源共享
CORS定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。CORS是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。 CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。只需服务器发送一个响应header即可。
由于有同源策略,跨域请求默认是禁止的。
CORS通过设置HTTP Header Access-Control-Allow-Origin实现:

Access-Control-Allow-Origin:*  //允许所有域名的脚本访问该资源
Access-Control-Allow-Origin:http://a.b.com  //允许特定域名访问该资源
Access-Control-Allow-Methods:GET, PUT, DELETE, POST  //允许的跨域请求
Access-Control-Allow-Headers:content-type  //允许跨域请求保护header
Access-Control-Max-Age:xxx  //跨域有效期内不需要重新发送预校验(OPTIONS)请求

CORS流程:JS先发出跨域请求,再检查响应中的“Access-Control-Allow-Origin”头。如果这个头允许当前页面跨域访问,则可以读取响应,否则被禁止访问。如果不是简单的CORS,则先发送OPTIONS进行预校验,允许访问再发送跨域请求。

代理

方法一:通过后端(ASP、ASP.NET、JAVA、PHP)获取其他域名下内容,再将结果返回前端。
方法二:NGINX反向代理转发
NGINX代理,转换为同域名。CORS的致命缺点:AJAX不会把cookie中的session id也发送过去。
方法三:NGINX方向代理,通过NGINX进行CORS控制。

JSONP

jsonp只支持get请求,不支持post。
原理:动态引入script标签,而script标签的src是可以跨域的。

iframe

通过修改document.domain来跨域:只能把document.main设置成自身或者更高一级的父域,且主域必须相同。——实现不同字域的框架间的交互。
可以用隐藏的iframe做代理,让iframe载入一个与AJAX目标页面处在相同域的页面,因此,该iframe可以正常使用AJAX获取数据,再通过修改document.domain,让主页面的js可以完全控制iframe。

原文地址:https://www.cnblogs.com/wenshaochang123/p/8392396.html

时间: 2024-10-15 18:23:36

AJAX四种跨域处理方法的相关文章

ajax原理和跨域解决方法

ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1--启动  获取XMlHttpRequest对象             2--open 打开url通道,并设置异步传输              3--send 发送数据到服务器             4--服务器接受数据并处理,处理完成后返回结果              5--客户端接收服务器端返回

几种跨域的方法

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas } 完整的http请求过程 1.建立TCP连接 2.WEB浏览器向WEB服务器发送请求命令 3.WEB浏览器发送请求头信息(头信息:客服端环境信息,身份验证信息等) 4.WEB服务器应答 5.WEB服务器发送应答头信息 6.WEB服务器向浏览器发送数据 7.WEB服务器关闭TCP连接 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font:

解决ajax跨域的方法原理详解之Cors方法

1.神马是跨域(Cross Domain) 对于端口和协议的不同,只能通过后台来解决. 一句话:同一个ip.同一个网络协议.同一个端口,三者都满足就是同一个域,否则就是 跨域问题了.而为什么开发者最初不直接定为一切可跨域的呢?默认的为什么都是不可跨域呢?这就涉及到了同源策 略,为了系统的安全,由Netscape提出一个著名的安全策略.现在所有支持JavaScript的浏览器都会使用这个策略. 所谓同源是,域名,协议,端口相同.当我们在浏览器中打开百度和谷歌两个网站时,百度浏览器在执行一个脚本的

web三种跨域请求数据方法

web三种跨域请求数据方法 以下测试代码使用php,浏览器测试使用IE9,chrome,firefox,safari <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.

JQuery - Ajax和Tomcat跨域请求问题解决方法!

在JQuery里面使用Ajax和Tomcat服务器之间进行数据交互,遇到了跨域请求问题,无法成功得到想要的数据! 错误信息部分截图: 通过错误信息判断知道已经发生在Ajax跨域请求问题了! 当前Tomcat服务器,是一个已经存在的工程,有APP同这部分代码一同工作.我所做的是开发另外一款手机应用程序,并且使用已有的接口!在这种情况下,实现Ajax跨域请求,而且对目前源代码影响越小越好!怎样达到这样的目标?最终通过为Tomcat添加过滤器方式完成! 由于此项目是商业项目,服务器并不是我管理,所以无

ajax 跨域解决方法

最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax本身是不支持跨域的,这是由于javascript的同源策略所导致.但是我们可以通过其他方法来解决ajax的跨域问题. 1  由于我们是利用了jquery来写的ajax,我们一开始是准备 利用jsonp来解决的,客户端类似下面写法 $.ajax({ type : "get", async:false, url : "http://w

跨域cors方法(jsonp,document.domain,document.name)及iframe性质

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

JavaScript 九种跨域方式实现原理

前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS.CSFR 等***.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源.同源策略限制内容有: Cookie.LocalStorage.IndexedDB 等存储性内容DOM 节点AJAX 请求发送

九种跨域方式实现原理

前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容. 本文完整的源代码请猛戳github 博客 一.什么是跨域? 1.什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到 XSS.CSFR 等攻击.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源. 同源策略限制内容有: Cookie.LocalStorage.IndexedDB