08: CORS实现跨域请求

 

目录:

  • 1.1 cors跨域请求介绍
  • 1.2 使用tornado实现 复杂请求
  • 1.3 Django中使用django-cors-headers解决跨域问题

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项目(客户端域)

 app.py

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()

 get_data.html

<!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>

      5. 创建 jack_tornado项目(服务端域)

 app.py

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()

1.3 Django中使用django-cors-headers解决跨域问题

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

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

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

 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',
)

   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项目(客户端域)

 app.py

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()

 

 get_data.html

<!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>

      5. 创建 jack_django项目(服务端域) 

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

 views.py

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'}))

 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',
)

#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',
)