CORS的原理及应用

CORS的原理及应用

CORS是跨站资源共享，同样是解决浏览器的同源策略

其本质是设置响应头，使得浏览器允许跨域请求。

第三方网站返回数据的时候在浏览器的响应头中添加允许的域名，允许所有的用*

1 简单请求

简单请求是只发一次请求

ajax请求不变，第三方后台修改

s4的后台，在返回值中添加允许的域名和端口，注意不同后面写具体的域名，自己出错是在后面加上了cors

允许所有的，用*

def new_users(request):
    print('请求is coming')
    user_list = [
        'aaa',
        'bbb',
        'ccc'
    ]
    user_list_str = json.dumps(user_list)
    obj = HttpResponse(user_list_str)
    obj['Access-Control-Allow-Origin']='http://www.s5.com:8000'
    # obj['Access-Control-Allow-Origin']='*'
    return obj

s5前端没有改变

     <input type="button" value="获取用户列表" onclick="getUsers();" />
        <script src="/static/jquery-3.2.1.js"></script>
        <script>
            function getUsers(){
                $.ajax({
                    url: 'http://www.s4.com:8001/new_users/',
                    type:"GET",
                    success:function(arg){
                        console.log(arg);
                    }
                })
            }
        </script>

1 非简单请求

两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输

第一次发送的是OPTION请求，在OPTION中进行校验，只有校验通过才能发其他的请求

如发送DELETE请求，第一次接受的是OPTIONS请求

s5前端

<input type="button" value="获取用户列表" onclick="getUsers();" />
        <script src="/static/jquery-3.2.1.js"></script>
        <script>
            function getUsers(){
                $.ajax({
                    url: 'http://www.s4.com:8001/new_users/',
                    type:"DELETE",  //delete是复杂请求
                    success:function(arg){
                        console.log(arg);
                    }
                })
            }
        </script>

s4后台

注意是OPTIONS，

def new_users(request):
    print(request.method)
    if request.method == "OPTIONS":
        obj = HttpResponse()
        obj['Access-Control-Allow-Origin']='*'
        obj['Access-Control-Allow-Methods'] = "DELETE"  # 允许DELETE
        return obj
    user_list = [
        'aaa',
        'bbb',
        'ccc'
    ]
    user_list_str = json.dumps(user_list)
    obj = HttpResponse(user_list_str)
    obj['Access-Control-Allow-Origin'] = '*'
    return obj

参考：

http://www.cnblogs.com/wupeiqi/articles/5703697.html