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 条评论
登录 后参与评论

相关文章

来自专栏草根专栏

从头编写 asp.net core 2.0 web api 基础框架 (2)

Github源码地址是: https://github.com/solenovex/Building-asp.net-core-2-web-api-starte...

3937
来自专栏rhj

Comet——服务器推送解决方案

Comet就是这么个词,描述技术、协议和为浏览器提供可行且可扩展的低延迟数据传输的解决方案,,,的集合。

1210
来自专栏Google Dart

Dart 服务端开发 文件上传 原

722
来自专栏西安-晁州

nodejs设置服务端允许跨域

//设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-...

1850
来自专栏hbbliyong

SpringBoot解决ajax跨域问题

一、第一种方式: 1、编写一个支持跨域请求的 Configuration import org.springframework.context.annotati...

2784
来自专栏帅小子的日常

购物车的原理以及实现

45711
来自专栏软件开发

JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

一、AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应...

1865
来自专栏XAI

微信硬件平台对接--蓝牙

http://www.vxzsk.com/142.html这个网站的教程相当详细,本文只是自己测试总结一些相关内容。 平台接入流程 http://iot.wei...

23512
来自专栏木子墨的前端日常

CORS跨域模型浅析及常见理解误区分析

CORS跨域资源共享是前后端跨域十分常用的一种方案,主要依赖Access-Control-Allow(ACA)系列header来实现一种协商性的跨域交互。

543
来自专栏FreeBuf

VMware更新 | 修复Apache Flex BlazeDS中的漏洞

VMware发布了数个产品的版本更新,目的是修复Apache Flex BlazeDS中的一个漏洞。 据VMware介绍,Flex BlazeDS组件应用在数个...

1745

扫描关注云+社区