08: CORS实现跨域请求

1.1 cors跨域请求介绍返回顶部

　　1、cors是什么　　

　　　　　　1. 随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing）

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

　　2、简单请求必须满足的两个条件（不满足就是复杂请求）

　　　　　　1. 条件1： 请求方式：HEAD、GET、POST

　　　　　　2. 条件2： 请求头信息：

　　　　　　　　　　Accept
　　　　　　　　　　Accept-Language
　　　　　　　　　　Content-Language
　　　　　　　　　　Last-Event-ID
　　　　　　　　　　Content-Type 对应的值是以下三个中的任意一个
　　　　　　　　　　　　　　application/x-www-form-urlencoded
　　　　　　　　　　　　　　multipart/form-data
　　　　　　　　　　　　　　text/plain

　　3、简单请求和非简单请求的区别

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

　　4、关于“预检”

　　　　　　1. 请求方式：OPTIONS
　　　　　　2. “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
　　　　　　3. 如何“预检”

　　　　　　　　　　1）如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
　　　　　　　　　　　　　　Access-Control-Request-Method
　　　　　　　　　　2）如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
　　　　　　　　　　　　　　Access-Control-Request-Headers

1.2 使用tornado实现复杂请求返回顶部

　　1、说明

　　　　　　1. 由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

　　　　　　2. “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
　　　　　　3. “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers
　　　　　　4. “预检”缓存时间，服务器设置响应头：Access-Control-Max-Age

　　2、tornado测试cors步骤

　　　　　　1. 创建两个tornado项目： tom_tornado（客户端域）、jack_tornado（服务端域）

　　　　　　2、修改C:\Windows\System32\drivers\etc 路径下的 hosts文件，添加两条hosts记录

　　　　　　　　　　127.0.0.1 tom.com
　　　　　　　　　　127.0.0.1 jack.com

　　　　　　3、在http://tom.com:8000/get_date 的get_date.html文件通过ajax向 http://jack.com:8888/index 获取数据

　　　　　　4、创建 tom_tornado项目（客户端域）

import tornado.ioloop

import tornado.web

class MainHandler(tornado.web.RequestHandler):

    def get(self):

        self.set_header('Access-Control-Allow-Origin', "")

        self.render('get_data.html')

settings = {

    'template_path': 'template',

    'static_path': 'static',

    'static_url_prefix': '/static/',

}

application = tornado.web.Application([

    (r"/get_date", MainHandler),

], **settings)

if __name__ == "__main__":

    application.listen(8000)

    print('http://tom.com:8000/get_date')

    tornado.ioloop.IOLoop.instance().start()

app.py

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <p>

        <input type="submit" onclick="XmlSendRequest();" />

    </p>

    <p>

        <input type="submit" onclick="JqSendRequest();" />

    </p>

    <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>

    <script>

        function XmlSendRequest(){

            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4) {

                    var result = xhr.responseText;

                    console.log(result);

                }

            };

            xhr.open('GET', "http://jack.com:8888/index", true);

            xhr.send();

        }

        function JqSendRequest(){

            $.ajax({

                url: "http://jack.com:8888/index",

                type: 'GET',

                dataType: 'text',

                success: function(data, statusText, xmlHttpRequest){

                    console.log(data);

                }

            })

        }

    </script>

</body>

</html>

get_data.html

　　　　　　5. 创建 jack_tornado项目（服务端域）

import tornado.ioloop

import tornado.web

import json

class IndexHandler(tornado.web.RequestHandler):

    def get(self):

        self.set_header("Access-Control-Allow-Origin", "*")

        self.set_header("Access-Control-Allow-Headers", "x-requested-with")       # 允许请求头则需服务器设置响应头

        self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')     # 允许请求方式则需服务器设置响应头

        # self.set_header('Access-Control-Max-Age', 10)                               # “预检”缓存时间，服务器设置响应头

        self.write('{"status": true, "data": "seven"}')

settings = {

    'template_path': 'views',

    'static_path': 'static',

    'static_url_prefix': '/static/',

}

application = tornado.web.Application([

    (r"/index", IndexHandler),

], **settings)

if __name__ == "__main__":

    application.listen(8888)

    print('http://jack.com:8888/index')

    tornado.ioloop.IOLoop.instance().start()

app.py

1.3 Django中使用django-cors-headers解决跨域问题返回顶部

　　1、安装django-cors-headers 实现cors

　　　　　　1. 安装django-cors-headers插件： pip install django-cors-headers

　　　　　　2. 使用时在对应的Django项目settings.py中做以下修改：

#1、指定允许的hosts，否则通过 http://jack.com:8888/index/ 无法访问jack_django程序

ALLOWED_HOSTS = ['*']

#2、将corsheaders 注册到app中

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'corsheaders',

    'app01',

]

#3、将下面两条添加到中间件重

MIDDLEWARE = [

    'corsheaders.middleware.CorsMiddleware',

    'django.middleware.common.CommonMiddleware',

]

#4、配置 django-cors-headers 中的参数

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL = True

CORS_ORIGIN_WHITELIST = (

    '*',

)

CORS_ALLOW_METHODS = (

    'DELETE',

    'GET',

    'OPTIONS',

    'PATCH',

    'POST',

    'PUT',

    'VIEW',

)

CORS_ALLOW_HEADERS = (

    'XMLHttpRequest',

    'X_FILENAME',

    'accept-encoding',

    'authorization',

    'content-type',

    'dnt',

    'origin',

    'user-agent',

    'x-csrftoken',

    'x-requested-with',

    'Pragma',

)

settings.py

　　2、使用代码简单测试

　　　　　　1. 创建一个tornado项目和一个Django项目： tom_tornado（客户端域：tornado项目）、jack_django（服务端域：Django项目）

　　　　　　2、修改C:\Windows\System32\drivers\etc 路径下的 hosts文件，添加两条hosts记录

　　　　　　　　　　127.0.0.1 tom.com
　　　　　　　　　　127.0.0.1 jack.com

　　　　　　3、在http://tom.com:8000/get_date 的get_date.html文件通过ajax向 http://jack.com:8888/index 获取数据

　　　　　　4、创建 tom_tornado项目（客户端域）

import tornado.ioloop

import tornado.web

class MainHandler(tornado.web.RequestHandler):

    def get(self):

        self.set_header('Access-Control-Allow-Origin', "")

        self.render('get_data.html')

settings = {

    'template_path': 'template',

    'static_path': 'static',

    'static_url_prefix': '/static/',

}

application = tornado.web.Application([

    (r"/get_date", MainHandler),

], **settings)

if __name__ == "__main__":

    application.listen(8000)

    print('http://tom.com:8000/get_date')

    tornado.ioloop.IOLoop.instance().start()

app.py

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <p>

        <input type="submit" onclick="XmlSendRequest();" />

    </p>

    <p>

        <input type="submit" onclick="JqSendRequest();" />

    </p>

    <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>

    <script>

        function XmlSendRequest(){

            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4) {

                    var result = xhr.responseText;

                    console.log(result);

                }

            };

            xhr.open('GET', "http://jack.com:8888/index/", true);

            xhr.send();

        }

        function JqSendRequest(){

            $.ajax({

                url: "http://jack.com:8888/index/",

                type: 'POST',

                dataType: 'text',

                success: function(data, statusText, xmlHttpRequest){

                    console.log(data);

                }

            })

        }

    </script>

</body>

</html>

get_data.html

　　　　　　5. 创建 jack_django项目（服务端域）

　　　　　　　　注：为避免端口冲突，主动修改jack_django项目监听端口为：8888

from django.shortcuts import render,HttpResponse

import json

def index(request):

    if request.method == 'get':

        return HttpResponse(json.dumps({'name':'jack'}))

    else:

        return HttpResponse(json.dumps({'name': 'jack222'}))

views.py

#1、指定允许的hosts，否则通过 http://jack.com:8888/index/ 无法访问jack_django程序

ALLOWED_HOSTS = ['*']

#2、将corsheaders 注册到app中

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'corsheaders',

    'app01',

]

#3、将下面两条添加到中间件重

MIDDLEWARE = [

    'corsheaders.middleware.CorsMiddleware',

    'django.middleware.common.CommonMiddleware',

]

#4、配置 django-cors-headers 中的参数

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL = True

CORS_ORIGIN_WHITELIST = (

    '*',

)

CORS_ALLOW_METHODS = (

    'DELETE',

    'GET',

    'OPTIONS',

    'PATCH',

    'POST',

    'PUT',

    'VIEW',

)

CORS_ALLOW_HEADERS = (

    'XMLHttpRequest',

    'X_FILENAME',

    'accept-encoding',

    'authorization',

    'content-type',

    'dnt',

    'origin',

    'user-agent',

    'x-csrftoken',

    'x-requested-with',

    'Pragma',

)

settings.py