HTML5 AJAX跨域请求

HTML5新的标准中,增加了” Cross-Origin Resource Sharing”特性,这个特性的出现使得跨域通信只需通过配置http协议头来即可解决。

Cross-Origin Resource Sharing 详细解释见:
http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html

Cross-Origin Resource Sharing实现的最重要的一点就是对参数” Access-Control-Allow-Origin”的配置,即通过 次参数检查该跨域请求是否可以被通过。
如:Access-Control-Allow-Origin:http://a.com表示允许a.com下的域名跨域访问;
Access-Control-Allow-Origin:*表示允许所有的域名跨域访问。

如果需要读取读取cookie:
需要配置参数:Access-Control-Allow-Credentials:true
同时在xhr发起请求的时候设置参数withCredentials为true:
var xhr = new XMLHttpRequest();
xhr.open();
xhr.withCredentials = true; //这个放在xhr.open后面执行,否则有些浏览器部分版本会异常,导致设置无效。

JS:

varxhr =newXMLHttpRequest(); ; 
xhr.open('GET','http: //b.com/cros/ajax.php',true);
xhr.withCredentials =true;
xhr.onload =function() {          
  alert(xhr.response);//reposHTML;
};  
xhr.onerror =function() {
 alert('error making the request.');
};
xhr.send();

转载于:https://www.cnblogs.com/liubingboke/p/8193475.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前后端分离时,前端与后端是通过网络进行通信的。由于安全原因,浏览器限制了不同域名之间的直接通信,这就是跨域问题。 在前后端分离的架构中,前端是通过Ajax请求与后端进行数据交互的。解决跨域问题有几种常见的方法: 1. JSONP(JSON with Padding):这是一种利用动态创建<script>标签实现跨域请求的方法。前端通过创建一个<script>标签,设置其src属性为后端接口地址,并在url中传递一个回调函数名。后端将返回数据包装在该回调函数中返回,前端通过执行该回调函数来获取数据。 2. CORS(Cross-Origin Resource Sharing):这是一种更为现代化的解决跨域问题的方法。后端在响应头中添加Access-Control-Allow-Origin字段,指定允许访问的域名或通配符"*"表示允许任意域名访问。 3. 代理服务器:前端可以通过配置代理服务器来实现跨域请求。前端将请求发送给代理服务器,代理服务器再将请求转发给后端,然后将后端的响应返回给前端。这样前端与代理服务器之间是同源的,就不会有跨域问题了。 4. WebSocket:WebSocket是HTML5提供的一种双向通信协议,它可以与任意域名建立连接,不存在跨域问题。前端可以通过WebSocket与后端进行通信。 需要注意的是,以上方法都需要后端进行一定的配置或处理。选择哪种方法取决于具体的场景和技术栈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值