Django开发博客（十一）—跨域资源共享（CORS）

背景

我旁边的开发在学ReactNative，说要拿我的博客练手，顺带给我写一个Android的博客客户端。这感情好啊，这个时候就必须要给他写两个接口，一个是获取文章列表，另一个是文章的详情。

接口

说实话，写两个接口应该是非常简单的，我也是这么想的，当然，分分钟也就写出来了。

def get_article(request, article_id):
"""
获取文章详情
:param request:
:param article_id:文章ID
:return: Json
"""
article_view = BlogBody.objects.get(id=article_id)
rst_data = {
"errmsg": "OK",
"article_title": article_view.blog_title,
"article_body": markdown.markdown(article_view.blog_body),
"article_author": article_view.blog_author,
}
return JsonResponse(rst_data, safe=False)

def get_article_list(request, list_type):
"""
获取文章列表
:param request:
:param list_type:类型
:return:
"""
article_list = []
if list_type == "all":
article_list_all = BlogBody.objects.all()
for x in article_list_all:
article_list_title = x.blog_title
article_list_id = x.id
article_data = {
"title": article_list_title,
"id": article_list_id
}
article_list.append(article_data)
rst_data = {
"errmsg": "OK",
"article_list": article_list
}
return JsonResponse(rst_data, safe=False)
else:
article_list_type = BlogBody.objects.filter(blog_type=list_type)
for x in article_list_type:
article_list_title = x.blog_title
article_list_id = x.id
article_data = {
"title": article_list_title,
"id": article_list_id
}
article_list.append(article_data)
rst_data = {
"errmsg": "OK",
"article_list": article_list
}
return JsonResponse(rst_data, safe=False)

URL我就不当列了，并不难写。

测试

身为一个测试人员，自己写完的东西肯定是要测一下的。我在本地环境调试的时候测试通过，部署上SAE之后，我自己也测了一下，并没有问题。该返回的也都返回了。

问题

当我把接口文档丢给开发之后，开发的反馈是，无法获取数据。这就很奇怪了，我自己测试时很正常啊，就是一个普通的http请求而已。

根据开发的经验，这个是跨域调用的问题。我返回的数据必须要是CORS的数据，也就是返回头部要有Access-Control-Allow-Origin这个信息。否则只能同源调用。

什么是CORS?

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

解决办法

Google了一下，有两种解决办法，一种是使用JSONP来处理返回数据，看起来有点麻烦，另一种是在Http返回的时候加一个头部信息。

response = HttpResponse()
response['Access-Control-Allow-Origin'] = '*'
return response

那么问题又来了，我使用的是JsonResponse()，并不是HttpResponse()。

好吧，其实两个是一样的，我们可以看JsonResponse的源码

class JsonResponse(HttpResponse):
"""
An HTTP response class that consumes data to be serialized to JSON.

:param data: Data to be dumped into json. By default only ``dict`` objects
are allowed to be passed due to a security flaw before EcmaScript 5. See
the ``safe`` parameter for more information.
:param encoder: Should be an json encoder class. Defaults to
``django.core.serializers.json.DjangoJSONEncoder``.
:param safe: Controls if only ``dict`` objects may be serialized. Defaults
to ``True``.
"""

def __init__(self, data, encoder=DjangoJSONEncoder, safe=True, **kwargs):
if safe and not isinstance(data, dict):
raise TypeError('In order to allow non-dict objects to be '
'serialized set the safe parameter to False')
kwargs.setdefault('content_type', 'application/json')
data = json.dumps(data, cls=encoder)
super(JsonResponse, self).__init__(content=data, **kwargs)

其他的看不懂没关系，只要看懂JsonResponse是继承于HttpResponse就行了。父类的方法，子类肯定也是可以适用的，最后的返回结果我们只要简单的修改一下就行了。

response = JsonResponse(rst_data, safe=False)
response['Access-Control-Allow-Origin'] = '*'
return response

response = JsonResponse(rst_data, safe=False)
response['Access-Control-Allow-Origin'] = '*'
return response

这样用jQuery就可以成功的跨域调用了。

注意：没必要共享的接口就不要使用跨域资源共享，否则容易引起攻击