ajax跨域问题(python版本)

Python016

ajax跨域问题(python版本),第1张

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。即JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。

注意:localhost和127.0.0.1也属于跨域。

如果Origin指定的源不在许可范围内, 服务器会返回一个不带有Access-Control-Allow-Origin字段的响应 . 浏览器解析时发现缺少了这个字段, 就会报错.

修改Django中的views.py文件修改views.py中对应API的实现函数,给返回值加上响应头Access-Control-Allow-Origin,允许其他域通过Ajax请求数据:

满足以下两个条件的请求。

(1) 请求方法是以下三种方法之一:

(2) HTTP的头信息不超出以下几种字段:

非简单请求就是复杂请求。

非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

预检请求为OPTIONS请求,用于向服务器请求权限信息的。

预检请求被成功响应后,才会发出真实请求,携带真实数据。

JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

JSONP的实现步骤大致如下(参考了来源中的文章)

请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容

这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象,而不是字符串,因此避免了使用JSON.parse的步骤。

JSONP使用注意

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)。

前面讲了JSONP的实现原理,现在我们可以自己写JS来实现JSONP功能。

一般情况下,我们希望这个script标签能够动态的调用,而不是像固定在html里面所以没等页面显示就执行了,很不灵活。

我们可以通过页面的触发事件操作后,通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务。实例如下:

为了更加灵活,上述我们将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调。

如上,jQuery框架也当然支持JSONP,可以使用 $.getJSON(url,[data],[callback]) 方法。

与js实现的方式相比,我们并不要自己生成一个script标签,客户端也并不需要自己定义一个回调函数.

上述这种方法,很方便,不需要我们自己定义回调函数和指定回调函数名,但是,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?

我们可以使用$.ajax方法来实现。如下例:

在上小节中jsonp: 'callbacks'就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名,server端接受callback键对应值后就可以在其中填充数据打包返回。

但是,jsonpCallback参数可以不定义,jquery会自动定义一个随机名发过去,那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。

如此,我们的跨域处理即完成,支持所有的请求。

Ajax可以使用HTTP请求,XMLHttpRequest对象来请求Python接口。1.首先,创建XMLHttpRequest对象来发起HTTP请求2.然后为请求提供必要的参数,如URL、请求方法和头部信息等3.最后调用XMLHttpRequest.send()发送请求并处理响应,从而可以实现请求Python接口的功能。

前端js改成这样试试:

var form = $("<form></form>").attr("action", "/cgi-bin/rpt_data_toExcel.py").attr("method", "post")

form.append($("<input></input>").attr("type", "hidden").attr("name", "fileName").attr("value", "results.xls"))

form.appendTo('body').submit().remove()