Ajax 跨域 异步 CORS
对于一个简单的请求,没有定制header并且body是text/plain的话,该请求发送的时候会带上一个header叫origin,包含了发送请求的(prototype,domin,和port),服务器就可以根据这个来决定是否响应:
Origin: http://www.haha.com
当服务器响应的时候,会返回一个Access-Control-Allow-Origin头,里面的信息要么和发送的的origin一样,要么为*如果那是一个公共资源,浏览器匹配以后才会进行处理:
Access-Control-Allow-Origin: http://www.haha.com
IE跨域:
通过XDomainRequest对象实现,和XHR比有一些不同之处:
1、Cookies are neither sent with requests nor received with responses.
2、There is no access to set request headers other than Content-Type.
3、There is no access to response headers.
4、Only GET and POST requests are supported.
上面这些限制缓解了跨网站伪造请求(csrf)和跨网站脚本攻击(xss),被请求的资源可以根据恰当的数据(user-agent,referrer等等),动态地决定是否设置返回的 Access-Control-Allow-Origin头信息。作为请求的一部分,origin头信息携带着请求发起源域名信息也会被同时发送,这样被请求的资源服务方就可以识别出这是一个XDR跨域请求了。
get请求例子:
var xdr = new XDomainRequest();
xdr.onload = function(){
alert(xdr.responseText);
};
xdr.onerror = function(){
alert(“An error occurred.”);
};
xdr.timeout = 1000;
xdr.ontimeout = function(){
alert(“Request took too long.”);
};
xdr.open(“get”, “http://www.somewhere-else.com/page/”); 这里只接受两个参数,只能使用异步方式请求
xdr.send(null);
xdr.abort(); //stop the request
当收到响应的时候,只能拿到未经处理的text。也不能判断status的值。如果没有 Access-Control-Allow-Origin也会失败,并且无法得到错误信息,所以必须监听error事件,不然失败了都没人知道啊。
post请求方式:
var xdr = new XDomainRequest();
xdr.onload = function(){
alert(xdr.responseText);
};
xdr.onerror = function(){
alert(“An error occurred.”);
};
xdr.open(“post”, “http://www.somewhere-else.com/page/”);
xdr.contentType = “application/x-www-form-urlencoded”; 这是XDR里唯一允许接入的头信息了
xdr.send(“name1=value1&name2=value2”);
其他浏览器实现跨域:
同样使用xhr就可以了,把请求的地址改为绝对地址
var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert(“Request was unsuccessful: “ + xhr.status);
}
}
};
xhr.open(“get”, “http://www.somewhere-else.com/page/”, true);
xhr.send(null);
有三个限制:
1、Custom headers cannot be set using setRequestHeader().
2、Cookies are neither sent nor received.
3、The getAllResponseHeaders() method always returns an empty string
为了区分的话请求本地资源用相对地址,外面资源用绝对地址
兼容两者的函数:
function createCORSRequest(method, url){
var xhr = new XMLHttpRequest();
if (“withCredentials” in xhr){ 通过检测是否含有 withCredentials可以判断当前xhr对象是否支持跨域请求
xhr.open(method, url, true);
} else if (typeof XDomainRequest != “undefined”){
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
Preflighted Requests(先导请求)(当使用GET, HEAD, POST以外的方法。而且當用POST方法時,如果請求連帶的資料其Content-Type不為application/x-www-form-urlencoded, multipart/form-data, 或text/plain,例如POST請求連帶的資料是application/xml或text/xml的XML類型資料,那麼先導請求就會先送出。或者請求中有自訂義標頭,例如自定义一個X-PINGOTHER header。)
Origin — Same as in simple requests.
Access-Control-Request-Method — The method that the request wants to use.
Access-Control-Request-Headers — (Optional) A comma-separated list of the custom headers being used.
Access-Control-Allow-Origin — Same as in simple requests.
Access-Control-Allow-Methods — A comma-separated list of allowed methods.
Access-Control-Allow-Headers — A comma-separated list of headers that the server will allow.
Access-Control-Max-Age — The amount of time in seconds that this prefl ight request should be cached for.
响应结果会按照 Access-Control-Max-Age的时间缓存起来,只会在第一次请求时才会额外增加一个HTTP请求。
Credentialed Requests(附带验证信息请求)
跨域请求默认是不提供验证信息的,但是可以通过把 withCredentials设置为true来开启该功能,如果服务器允许就会在相应中返回:
Access-Control-Allow-Credentials: true
浏览器就可以获取求响应中的验证信息,如果没有在相应中返回的话,浏览器会拒绝任何响应,不会把响应传给JavaScript处理( responseText is an empty string, status is 0, and onerror() is invoked)
上面两种请求ie10及以下都不支持
Ajax 跨域 异步 CORS的更多相关文章
- WCF SOA --- AJAX 跨域请求处理 CORS for WCF
一.问题 跨域请求无法处理的问题,由于为了阻止恶意的网站通过JS脚本来窃取正常网站受保护的资源.所由所有的浏览器的默认策略是阻止XmlHttpRequest的跨域的异步请求. 但是对于一 ...
- AJAX跨域资源共享 CORS 详解
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...
- ajax跨域通过 Cors跨域资源共享 进行GetPost请求
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...
- ajax 跨域了 cors
<?php /** * Author: humanhuang * Date: 13-12-17 */ header('Access-Control-Allow-Origin:*'); heade ...
- Ajax跨域问题及解决方案 asp.net core 系列之允许跨越访问(Enable Cross-Origin Requests:CORS) c#中的Cache缓存技术 C#中的Cookie C#串口扫描枪的简单实现 c#Socket服务器与客户端的开发(2)
Ajax跨域问题及解决方案 目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP ...
- AJAX POST&跨域 解决方案 - CORS
一晃又到新年了,于是开始着手好好整理下自己的文档,顺便把一些自认为有意义的放在博客上,记录成点的点滴. 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- WeX5 - AJAX跨域调用相关知识-CORS和JSONP
http://docs.wex5.com/ajax-cross-domain/ 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容 ...
- AJAX跨域调用相关知识-CORS和JSONP(引)
AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...
随机推荐
- LinkedHashMap 源码解析
概述: LinkedHashMap实现Map继承HashMap,基于Map的哈希表和链该列表实现,具有可预知的迭代顺序. LinedHashMap维护着一个运行于所有条目的双重链表结构,该链表定义了迭 ...
- asp.net core后台系统登录的快速构建
登录流程图 示例预览 构建步骤 当然,你也可以直接之前前往coding仓库查看源码,要是发现bug记得提醒我啊~ LoginDemo地址 1. 首先你得有一个项目 2. 然后你需要一个登录页面 完整L ...
- NodeJS中的事件
/** * Created by xiwu.xxw on 2015/7/22. */ /** * EventEmitter 的每个事件由一个事件名和若干个参数组成, * 事件名是一个字符串,通常表达一 ...
- Asp.net MVC4高级编程学习笔记-视图学习第三课Razor页面布局20171010
Razor页面布局 1) 在布局模板页中使用@RenderBody标记来渲染主要内容.比如很多web页面说头部和尾部相同,中间内容部分使用@RenderBody来显示不同的页面内容. 2) 在布局 ...
- NSOperation与GCD的如何选择?
iOS开发的多线程实现方式,大概包括C的原始方式.NSThread方式.GCD.NSOperation的方式. 其中用的最多的应该是GCD和NSOperation的方式,很多第三方库都是使用了这两种方 ...
- Scala-Spark digamma stackoverflow问题
Scala-Spark digamma stackoverflow问题 这两天在用spark做点击率的贝叶斯平滑,参考雅虎的论文进行了一番尝试. 先上代码: # click_count, show_c ...
- 吐槽CSDN--想钱想疯了--推荐文章里面广告博文去不掉
CSDN广告手段高,广告博文删不掉! 如图所示,我自己的博客文章下面有个相关文章推荐,这是csdn新出的信息流式内容呈现方式,也没什么太大问题.只是,你在里面放广告"羊毛衫,弹力裤" ...
- springboot自定义配置源
概述 我们知道,在Spring boot中可以通过xml或者@ImportResource 来引入自己的配置文件,但是这里有个限制,必须是本地,而且格式只能是 properties(或者 yaml). ...
- interface接口
当一个抽象类中的方法都是抽象的时候,这时可以将该抽象类用另一种形式定义和表示,就是接口 interface. 定义接口使用的关键字不是class,是interface.接口中常见的成员: 这些成员都有 ...
- ftpclient 550 permission denied
遇到一个坑,ftp服务器有主被动模式,如果ftpclient 没有设置模式,默认就是主动模式,如果ftp服务器是被动模式,那么使用ftpclient就执行上传和下载,就会失败, 添加ftpClient ...