Ajax CORS

CORS(跨域资源共享,Cross-Origin Resource Sharing)是一种跨域访问的机制,可以让Ajax实现跨域访问。

其实,在服务器的response header中,加入“Access-Control-Allow-Origin: *”即可支持CORS,非常的简单,apache/nginx等怎么配置,见参考文档。
举个例子:

  • API部署在DomainA上;
  • Ajax文件部署在DomainB上,Ajax文件会向API发送请求,返回数据;
  • 用户通过DomainC访问DomainB的Ajax文件,请求数据

以上过程就发生了跨域访问。如果直接使用Ajax来请求就会失败,就像Chrome提示的:No 'Access-Control-Allow-Origin' header is present on the requested resource.

如何解决Ajax跨域访问问题?

1.使用 jsonp ,需要让服务器端放回jsonp格式的response

使用Ajax获取json数据时,存在跨域的限制。不过,在Web页面上调用js的script脚本文件时却不受跨域的影响,JSONP就是利用这个来实现跨域的传输。因此,我们需要将Ajax调用中的dataType从JSON改为JSONP(相应的API也需要支持JSONP)格式。JSONP只能用于GET请求。

2. 修改views.py中对应API的实现函数,允许其他域通过Ajax请求数据:

def myview(_request):
   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" ] = "*"
   return response

3. 使用 CorsMiddleware

可以配置允许跨域访问的白名单或者直接设置为允许所有的跨域访问,详见:

https://github.com/ottoyiu/django-cors-headers

猜你喜欢

转载自www.cnblogs.com/bobo0609/p/8930812.html