Django 框架关于 IE 跨域 XDomainRequest 传输的问题

Django 是一个强大的 Web 框架。
不过，
最近在处理各种跨域传输的问题，其中就遇到了一个坑： Django 服务下 IE 8、9 下面通过 XDomainRequest 无法传输数据的问题。

事情是这样子的。

1、 开发了一个接口，处理 POST 的 http 请求，在各类型 XMLHttpRequest 方法下面的 POST 请求基本处理通过来进行数据传输都能实现， request 的 POST 数据都能获取。
2、 不过，在 IE 8/9 的时候，使用 XDomainRequest 来进行跨域 POST 传输的时候，却没能获取到 POST 数据。

然后

事情就是这样，一开始还以为是 XDomainRequest 的 Ajax 请求代码出问题了。后面经过一番调试，越发觉得这不是 js 代码出问题了，而是 Django 解析出问题了。

所以

所以我就要测试，到底是我的 js 代码写错了，还是我的猜测正确了。经过验证，确实是 Django 解析这种请求出问题了。所以，就写下了这篇文章。

验证过程

然后我就开始验证这个过程了。

后端开发不同的 http 服务

使用不用的后端服务进行横向对比验证。

nodejs 的 http 服务

使用 nodejs 开发一个 http 服务来处理 POST 请求，横向对比 js 代码是否正确，代码很少，能实现功能就行，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var http = require('http');

http.createServer(function (req, res) {
  var body = '';
  req.on('data', function (chunk) {
    body += chunk;
  });
  req.on('end', function () {
    console.log('POSTed: ' + body);
    res.writeHead(200, {
      'Content-Type': 'text/html',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': '*',
      'Pragma': 'no-cache'
    });
    res.end('POSTed: ' + body);
  });
}).listen(3001);

使用过程，保存为 node.js， 然后直接运行 node node.js 即可，监听了 3001 端口的 http 服务。

django 的 http 服务

这个用来检验，

核心代码如下：
1、 views.py 的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import json
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt


@csrf_exempt
def index(request):
    if request.method == 'POST':
        data = request.POST
        print 'POSTed: ', data
        response = HttpResponse('POSTed: ' + json.dumps(data), content_type='text/html')
    elif request.method == 'GET':
        response = HttpResponse('Please use post method', content_type='text/html')
    else:
        response = HttpResponse('What', content_type='text/html')

    response['Access-Control-Allow-Origin'] = '*'
    response['Access-Control-Allow-Headers'] = '*'
    response['Pragma'] = 'no-cache'

    return response

2、 urls.py 的：

1
url(r'^$', 'some_app.views.index', name='test_post'),

使用过程，保存为 django 的 some_app 对应的 views， 增加到 url 路由中， 然后直接运行 python manage.py runserver 0.0.0.0:3002 即可，监听了 3002 端口的 http 服务。

前端 js 代码请求。

贴全部出了了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test post whit django and nodejs</title>
    <style>
      .red {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Test Django POST Request Method</h1>
    <h3>core code</h3>
    <pre>
      var host = location.hostname;
      var sendTimeout = 0;
      var ajax = function(url, type) {
        if(window.XDomainRequest) {
          var xdomainAjax = new XDomainRequest();
          xdomainAjax.open('POST', url);
          xdomainAjax.timeout = 1200;
          xdomainAjax.onload = function(){
            console.log(type + ' with XDomainRequest: ', this.responseText);
            document.getElementById(type + '-xdomain').innerHTML = type + ' with XDomainRequest respone: <span class="red">' + this.responseText + '</span>';
          }
          xdomainAjax.onerror = function() {
            console.log('node error', this);
          }
          setTimeout(function() {
            xdomainAjax.send('param1=value1&param2=value2');
          }, sendTimeout)
        }

        if(window.XMLHttpRequest) {
          var xmlAjax = new XMLHttpRequest();
          xmlAjax.open('POST', url);
          xmlAjax.timeout = 1200;
          xmlAjax.onreadystatechange = function(){
            if (this.readyState==4 && this.status==200) {
              console.log(type + ' with XMLHttpRequest: ', this.responseText);
              document.getElementById(type + '-xml').innerHTML = type + ' with XMLHttpRequest respone: <span class="red">' + this.responseText + '</span>';

            }
          }
          setTimeout(function() {
            xmlAjax.send('param1=value1&param2=value2');
          }, sendTimeout)
        }
      }
    </pre>
    <hr>
    <h3>node respone</h3>
    <div>
      ajax code:
      <pre>
        ajax('http://'+host+':3001/', 'node');
      </pre>
    </div>
    <pre id="node-xml"></pre>
    <pre id="node-xdomain"></pre>

    <hr>

    <h3>django respone</h3>
    <div>
      ajax code:
      <pre>
        ajax('http://'+host+':3002/', 'django');
      </pre>
    </div>
    <pre id="django-xml"></pre>
    <pre id="django-xdomain"></pre>

    <script>
      var host = location.hostname;
      var sendTimeout = 0;
      var ajax = function(url, type) {
        if(window.XDomainRequest) {
          var xdomainAjax = new XDomainRequest();
          xdomainAjax.open('POST', url);
          xdomainAjax.timeout = 1200;
          xdomainAjax.onload = function(){
            console.log(type + ' with XDomainRequest: ', this.responseText);
            document.getElementById(type + '-xdomain').innerHTML = type + ' with XDomainRequest respone: <span class="red">' + this.responseText + '</span>';
          }
          xdomainAjax.onerror = function() {
            console.log('node error', this);
          }
          setTimeout(function() {
            xdomainAjax.send('param1=value1&param2=value2');
          }, sendTimeout)
        }

        if(window.XMLHttpRequest) {
          var xmlAjax = new XMLHttpRequest();
          xmlAjax.open('POST', url);
          xmlAjax.timeout = 1200;
          xmlAjax.onreadystatechange = function(){
            if (this.readyState==4 && this.status==200) {
              console.log(type + ' with XMLHttpRequest: ', this.responseText);
              document.getElementById(type + '-xml').innerHTML = type + ' with XMLHttpRequest respone: <span class="red">' + this.responseText + '</span>';

            }
          }
          setTimeout(function() {
            xmlAjax.send('param1=value1&param2=value2');
          }, sendTimeout)
        }
      }
    </script>
    <script>
      ajax('http://'+host+':3001/', 'node');
    </script>

    <script>
      ajax('http://'+host+':3002/', 'django');
    </script>

  </body>
</html>

就酱，用这个静态文件访问就行。
运行方式： 保存为 index.html 然后， sudo npm i -g anywhere ，然后， cd 到当前目录， anywhere 3003 即可。就看到结果了。

结论

Django 在处理 XDomainRequest 的 POST 请求时候确实没有正确解析。 但是 nodejs 原生的 http 服务例子能解析。 python 原生的写法没进行测试。

然后发现现在也有框架无法处理 XDomainRequest 的 POST 数据，例如在抓包过程中使用的 livepool 工具。

解决方式

提供一种可行的解决方式，强行解析 body 即可。

1
2
from django.http import QueryDict
QueryDict(request.body)

具体怎么用，就看后面了。

测试环境

后端环境：

硬件： macbook pro retina 13
nodejs ： v0.12.0
django ： 1.8.3

运行环境：
PD 虚拟机 + WIN7 + IE 9

源代码

https://github.com/shenqihui/lab/tree/gh-pages/test_django_post_with_xdomainrequest

END