ajax跨域有没有踩过坑,IE低版本浏览器如何支持?

同源策略

为了保证用户信息的安全,防止恶意的网站窃取数据,所有的浏览器都实行这个策略。

同源策略是指,用户在A网页上的所产生的信息,B网页上不能访问,反过来A网页也不能访问其它网页的信息,除非这两个网页"同源"。

为什么说同源策略可以保证用户信息安全,举个栗子:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?

两个文档同源需满足

1. 协议相同

2. 域名相同

3. 端口相同

Ajax跨域通信

同源策略规定,Ajax请求只能发给同源的网址,否则就报错。然而我们开发过程中常常会碰到需要请求不同服务器上的数据。那么Ajax跨域通信就必须要解决了。

三种方式:

  • JSONP:JSONP是服务器与客户端跨源通信的常用方法,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。可惜只能是发送 get 请求
  • WebSocket:WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。(基本上不用此种方式,学习成本比较高)
  • CORS:CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10

CORS

  1. ie浏览器版不能低于IE10
  2. 后台服务器脚本需要明白的一些请求头:

Access-Control-Allow-Origin:允许哪些url可以跨域请求到本域,Access-Control-Allow-Origin:* 表示所有url都可以请求到本域名,如果你很懒可以这样写

Access-Control-Allow-Methods:允许的请求方法,一般是GET,POST,PUT,DELETE,OPTIONS

Access-Control-Max-Age:表明在该时间段内不再“预检”允许的请求方法(相当于缓存),即不以OPTIONS方法进行请求

Access-Control-Allow-Headers:允许哪些请求头可以跨域

CORS Python服务器请求头示例:

你将以下代码放到你的php代码的头部,咱们就可以实现ajax跨域请求了

response = HttpResponse(json.dumps({"key": "value", "key2": "value"})) response["Access-Control-Allow-Origin"] = "*" response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS" response["Access-Control-Max-Age"] = "1000" response["Access-Control-Allow-Headers"] = "*"

IE10以上版本,都好办,问题是有些用户就用了IE7,8该怎么办?当然,首先是鄙视一下这部分用户,鄙视完了,还是要想办法解决问题,毕竟做产品还是要以用户为上~

网上查了一圈,发现IE7 和以前是不支持跨域请求的, IE8 通过 XMLDocumentRequest实现,而不是 XMLHTTPRequest,所以IE8下面应该这样写:

// 创建XHR对象
function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // 针对Chrome/Safari/Firefox.
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        // 针对IE
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // 不支持CORS
        xhr = null;
    }
    return xhr;
}

// 发送CORS请求
function makeCorsRequest(method, url, cb) {
    // bibliographica.org是支持CORS的
    var xhr = createCORSRequest(method, url);
    if (!xhr) {
        alert('CORS not supported');
        return;
    }

    // 回应处理
    xhr.onload = function () {
        var text = xhr.responseText;
        text = $.parseJSON(text);
        cb(text);
    };

    xhr.onerror = function () {
        alert('Woops, there was an error making the request.');
    };
    xhr.send();
}

拉下来,我们就区分一下浏览器,如果是IE10以下版本,那就直接另一种方式,调用上面的实现方式。

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-08-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯AlloyTeam的专栏

脚本错误量极致优化-监控上报与 Script error

在前端开发工作中,除了项目开发保质保量上线以外,项目的数据监控也应该配套起来,确保线上的正常运转。如上报 pv 监控项目是否正常运转;测速上报反应项目质量。

1500
来自专栏Ryan Miao

Javascript跨域后台设置拦截

子域名之间互相访问需要跨域 结论放在开头: 服务端必须设置允许跨域 客户端带cookie需要设置withCredentials 无论服务端是否允许跨域,该req...

2648
来自专栏zhangdd.com

Nginx允许跨域访问的配置问题

如今前后端分离的模式,越来越成为很多团队的选择,通过分离前后端的工作,是的双方更能关注于自己核心的工作领域,只需要通过相应的API接口进行交互。

521
来自专栏gaoqin31

Ajax跨域

我们可以在www.a.com的js前端请求 www.a.com然后www.a.com请求www.b.com的数据

802
来自专栏jeremy的技术点滴

Web跨域总结

2827
来自专栏闻道于事

cors解决Web跨域访问问题

首先了解一下什么是跨域以及解决的几种常见方式。 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。 所谓同源是指,...

3677
来自专栏python爬虫日记

python2.7下urllib2的connection自动close的原因及解决办法

前文介绍了urllib2的常见问题的解决方案,今天来特别讨论下urllib2中短连接问题。

844
来自专栏cnblogs

CORS(跨域)请求总结和测试

一、简单请求与非简单请求 跨域请求分为简单与非简单请求,同时满足以下两种条件的可以确定为简单请求。 简单请求的请求方法 请求方法 说明 head 发送...

2156
来自专栏IMWeb前端团队

跨域资源共享的使用

前言 页面中常常会有需要跨域通信的需求实现,我们知道浏览器的同源策略是不允许不同域之间的相互通信的(这里不深究域的定义及如何才算跨域),比如a.com有b.co...

2046
来自专栏前端安全

浅谈Ajax跨域

如果我们前端页面的url和我们要提交的后端url存在跨域问题时,我们该如何解决呢?

41812

扫码关注云+社区