zoukankan html css js c++ java

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:WindowsSystem32driversetc 路径下的 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:WindowsSystem32driversetc 路径下的 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

查看全文

相关阅读:
toj 2819 Travel
toj 2807 Number Sort
zoj 2818 Prairie dogs IV
zoj 1276 Optimal Array Multiplication Sequence
toj 2802 Tom's Game
toj 2798 Farey Sequence
toj 2815 Searching Problem
toj 2806 Replace Words
toj 2794 Bus
css截取字符

原文地址：https://www.cnblogs.com/xiaonq/p/8038712.html

08: CORS实现跨域请求

目录：

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

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

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

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

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

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