Kevin-Blog
本章节的所有例子.rar

使用后台发送请求不存在跨域问题，因为中间介质不是浏览器，没有同源策略

同源策略


同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。

所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。（通俗理解: 本次请求的协议、域名、端口、和当前网站的协议、域名、端口相同的就叫同源）

如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。（通俗理解: js无法请求与当前协议、域名、端口不相同的数据，即: 百度无法直接请求谷歌的接口，必须跨域）

当请求的网址与当前协议、域名、端口不相同的时候，其实服务器那边已经接受到了请求并且返回了数据，只不过被浏览器进行了拦截（通俗理解: 在跨域请求的时候A向B发送请求，B接收到了请求并且返回了数据，但是返回的数据被浏览器拦截下来了）

JSONP


JSONP的原理: 通过script标签的跨域特性来绕过同源策略

JSONP: 前端+后端解决跨域问题

使用JONSP解决跨域的步骤: 

  1. 服务器返回一段 JS 执行函数的代码
  2. 前端通过js生成script标签，然后通过script标签请求需要跨域的网址
  3. 得到服务器返回的 JS 执行函数的代码，并且执行该代码

注意: JSONP一定是GET请求

1. 跨域实例一 -> area_a 跨域请求 area_b 的数据

  • area_a启动的时候端口设置为8001，area_b启动的时候端口设置为8002

  • area_b的服务端

area_b_jsonp.rar

# area_b/urls.py

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^area_b_service_jsonp/', views.service_jsonp),
]

# area_b/views.py

def service_jsonp(request):
    func = request.GET.get('callback')  # 获取传递过来的js函数名

    json_data = {
        'area': 'area_b',
        'name': 'Yeung'
    }

    return HttpResponse('%s(%s)' % (func, json.dumps(json_data)))  # 返回一个执行js函数的代码 callback({"area": "area_b", "name": "Yeung"})

  • 借助Script标签实现跨域 -> jsonp 实现的原理

area_a_script.rar

# area_a/jsonp.html

<button class="console">获取area_b的数据</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function callback_fn(res) {
        console.log(res);
        alert(res.area + ',' + res.name)
    }

    function get_jsonp_data(url) {
        var $script = $('<script></sciprt>');
        $script.attr('src', url);
        $("body").append($script);
        $script.remove();
    }

    $('.console').click(function () {
        get_jsonp_data('http://127.0.0.1:8002/area_b_service_jsonp/?callback=callback_fn')
    });

</script>

  • ajax 实现跨域1 -> ajax的jsonp都是基于上面 借助Script标签实现跨域 的例子封装的

area_a_ajax1.rar

# area_a/jsonp.html

<button class="console_ajax">使用ajax获取area_b的数据</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function callback_fn(res) {
        console.log(res);
        alert(res.area + ',' + res.name)
    }

    $('.console_ajax').click(function () {
        $.ajax({
            url: "http://127.0.0.1:8002/area_b_service_jsonp/",
            type: "get",
            dataType: "jsonp",
            jsonp: 'callback', // jsonp 参数就是定义地址参数中的key，注意 json 参数所设置的值一定要对应后台 request.GET.get('xxx') 的参数（即: request.GET 获取的是xxx，那么json参数所设置的值就是xxx）
            jsonpCallback: "callback_fn" // jsonpCallback 参数就是定义地址参数中的value
// jsonp 和 jsonpCallback 结合起来就是 ?callback=callback_fn -> http://127.0.0.1:8002/area_b_service_jsonp/?callback=callback_fn
        })
    })

</script>

  • ajax 实现跨域2 -> 推荐使用 -> ajax的jsonp都是基于上面 借助Script标签实现跨域 的例子封装的

area_a_ajax2.rar

# area_a/jsonp.html

<button class="console_ajax">使用ajax获取area_b的数据</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

    $('.console_ajax').click(function () {
        $.ajax({
            url: "http://127.0.0.1:8002/area_b_service_jsonp/",
            type: "get",
            dataType: "jsonp",
            jsonp: 'callback',  // jsonp 参数就是定义地址参数中的key，注意 json 参数所设置的值一定要对应后台 request.GET.get('xxx') 的参数（即: request.GET 获取的是xxx，那么json参数所设置的值就是xxx）
            // jsonpCallback: "callback_fn" // jsonpCallback 参数就是定义地址参数中的value

            // 如果不设置 jsonpCallback 参数，ajax 会随机生成一个函数名，且函数名指向的是 success 参数中所定义的函数
            // 不设置 jsonpCallback 参数所生成的网址 http://127.0.0.1:8002/area_b_service_jsonp/?callback=jQuery341039645627901967906_1559658050676
            success: function (res) {
                console.log(res)
            }
        })
    })

</script>

  • ajax 实现跨域3 -> ajax的jsonp都是基于上面 借助Script标签实现跨域 的例子封装的

area_a_ajax3.rar

# area_a/jsonp.html

<button class="console_ajax">使用ajax获取area_b的数据</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

/*
    function callback_fn(res) {
        console.log(res);
        alert(res.area + ',' + res.name)
    }
    */

    $('.console_ajax').click(function () {
        $.ajax({
            url: "http://127.0.0.1:8002/area_b_service_jsonp/",
            type: "get",
            dataType: "jsonp",
            jsonp: 'callback',  // jsonp 参数就是定义地址参数中的key，注意 json 参数所设置的值一定要对应后台 request.GET.get('xxx') 的参数（即: request.GET 获取的是xxx，那么json参数所设置的值就是xxx）
            jsonpCallback: "callback_fn", // jsonpCallback 参数就是定义地址参数中的value
            success: function (res) {
                console.log(res)
            }
/*
                同时设置了 jsonp jsonpCallback success 参数:

                没有名为 callback_fn 函数的情况:
                    ajax会执行 success 参数所定义的函数
                    所生成的网址: http://127.0.0.1:8002/area_b_service_jsonp/?callback=callback_fn&_=1559658490205

                有名为 callback_fn 函数的情况:
                    ajax 会执行名为 callback_fn 函数，而不执行 success 参数所定义的函数
                    所生成的网址: http://127.0.0.1:8002/area_b_service_jsonp/?callback=callback_fn&_=1559658490205

                结论:
                    不要同时设置了 jsonp jsonpCallback success 参数
                    如果设置了 jsonp success 就不要设置 jsonpCallback 参数
                    如果设置了 jsonp jsonpCallback 就不要设置 success 参数
            */
        })
    })
</script>

2. 跨域实例二 -> 跨域请求

jsop_example.html

# jsop_example.html

<input type="button" onclick="AjaxRequest()" value="跨域Ajax"/>

<div id="container"></div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function AjaxRequest() {
        $.ajax({
            //url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list',
            // 等同于
            url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'list',
            success: function (data) {
                $.each(data.data, function (i) {
                    var item = data.data[i];
                    var str = "<p>" + item.week + "</p>";
                    $('#container').append(str);
                    $.each(item.list, function (j) {
                        var temp = "<a href='" + item.list[j].link + "'>" + item.list[j].name + " </a><br/>";
                        $('#container').append(temp);
                    });
                    $('#container').append("<hr/>");
                })


            }
        });
    }

</script>

CORS


1.CORS的简介

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

2. CORS的理解

  • 本质: 设置响应头，使得浏览器允许跨域请求

  • cors: 后端解决跨域问题

  • 服务器告诉浏览器允许xxx网址进行跨域，不进行数据拦截

3. 简单请求 和 非简单请求

  • 只有跨域了，才有简单请求和复杂请求这一说法

  • 简单请求的条件（同时满足以下两个条件时，则是简单请求）

    • 请求方式:
      • HEAD
      • GET
      • POST

    • 请求头信息
  1. Accept
  2. Accept-Language
  3. Content-Language
  4. Last-Event-ID
  5. Content-Type 对应的值是以下三个中的任意一个
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

  • 非简单请求

    • 只要不满足简单请求的两个条件都是非简单请求

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

  • 简单请求：一次请求

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

3. 关于预检

  • 请求方式: OPTIONS

  • 预检其实就是做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息（即: 只有options请求通过了，才能发送真正的传递数据的请求）

  • 如何预检
    • 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
      • response['Access-Control-Allow-Methods'] = 'DELETE,PUT'
    • 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
      • response['Access-Control-Allow-Headers'] = 'Content-Type'  

4. 简单请求 -> 支持跨域

  • 把 csrf 中间件注释掉

  • FBV

FBV_simple_request.rar

# area_b/views.py

import json
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse


def service_cors(request):
    json_data = {
        'area': 'area_b',
        'name': 'Yeung'
    }
    response = HttpResponse(json.dumps(json_data))

# response["Access-Control-Allow-Origin"] = 'http://127.0.0.1:8001'  # 只允许 http://127.0.0.1:8001 进行跨域请求
    response["Access-Control-Allow-Origin"] = '*'  # 允许所有网址进行跨域请求

    return response

  • CBV

CBV_simple_request.rar

# area_b/views.py

import json
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from django.views import View


class ServiceCors(View):
    def get(self, request):
        json_data = {
            'area': 'area_b',
            'name': 'Yeung'
        }
        response = HttpResponse(json.dumps(json_data))

# response["Access-Control-Allow-Origin"] = 'http://127.0.0.1:8001'  # 只允许 http://127.0.0.1:8001 进行跨域请求
        response["Access-Control-Allow-Origin"] = '*'  # 允许所有网址进行跨域请求

        return response

  • html 代码

simple_request_html.rar

# area_a/cors.html

<button class="console_ajax">使用ajax获取area_b的数据</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
    $('.console_ajax').click(function () {
        $.ajax({
            url: "http://127.0.0.1:8002/area_b_service_cors/",
            type: "get",
            dataType: 'json',
            success: function (res) {
                console.log(res)
            }
        })
    })
</script>

5. 非简单请求 -> 支持跨域

  • 把 csrf 中间件注释掉

  • FBV

FBV_non-simple_request.rar

# area_b/views.py

import json
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse


def service_cors(request):
    json_data = {
        'area': 'area_b',
        'name': 'Yeung'
    }
    response = HttpResponse(json.dumps(json_data))

# response["Access-Control-Allow-Origin"] = 'http://127.0.0.1:8001'  # 只允许 http://127.0.0.1:8001 进行跨域请求
    response['Access-Control-Allow-Origin'] = '*'  # 允许所有网址进行跨域请求
    response['Access-Control-Allow-Headers'] = 'Content-Type'  # 允许携带的请求头，response['Access-Control-Allow-Headers'] = 'Content-Type,xx,xxx'
    response['Access-Control-Allow-Methods'] = 'DELETE,PUT'  # 允许发送的请求方式，这里不用添加 GET、POST 请求
# response['Access-Control-Max-Age'] = 10  # 本次预检请求的有效期，以秒为单位 -> 可以加和不加

    return response

  • CBV

CBV_non-simple_request.rar

# area_b/views.py

import json
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from django.views import View


class ServiceCors(View):

# 因为预检的请求方式是 options，所以要添加预检所需的视图类方法
    def options(self, request, *args, **kwargs):
        response = HttpResponse('')
        response['Access-Control-Allow-Origin'] = '*'  # 允许所有网址进行跨域请求
        response['Access-Control-Allow-Headers'] = 'Content-Type'  # 允许携带的请求头，response['Access-Control-Allow-Headers'] = 'Content-Type,xx,xxx'
        response['Access-Control-Allow-Methods'] = 'DELETE,PUT'  # 允许发送的请求方式，这里不用添加 GET、POST 请求
        return response

    def put(self, request):
        json_data = {
            'area': 'area_b',
            'name': 'Yeung'
        }
        response = HttpResponse(json.dumps(json_data))
        response['Access-Control-Allow-Origin'] = '*'  # 允许所有网址进行跨域请求
        return response

  • html 代码

non-simple_request_html.rar

# area_a/cors.html

<button class="console_ajax">使用ajax获取area_b的数据</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
    $('.console_ajax').click(function () {
        $.ajax({
            url: "http://127.0.0.1:8002/area_b_service_cors/",
            type: "put",
            contentType: 'application/json',
            dataType: 'json',
            data: '{"username":"Kevin","password":"123"}',
            success: function (res) {
                console.log(res)
            }
        })
    })
</script>

6. CORS 中间件的应用

  • 使用中间件代替在视图中设置响应头的代码

  • 粗暴版

# my_middleware.py

from django.utils.deprecation import MiddlewareMixin


class CORSMiddleware(MiddlewareMixin):

    def process_response(self, request, response):

# response["Access-Control-Allow-Origin"] = 'http://127.0.0.1:8001'  # 只允许 http://127.0.0.1:8001 进行跨域请求
        response['Access-Control-Allow-Origin'] = '*'  # 允许所有网址进行跨域请求
        response['Access-Control-Allow-Headers'] = 'Content-Type'  # 允许携带的请求头，response['Access-Control-Allow-Headers'] = 'Content-Type,xx,xxx'
        response['Access-Control-Allow-Methods'] = 'DELETE,PUT'  # 允许发送的请求方式，这里不用添加 GET、POST 请求
# response['Access-Control-Max-Age'] = 10  # 本次预检请求的有效期，以秒为单位 -> 可以加和不加

        return response

# settings.py

MIDDLEWARE = [
……
    'area_b.my_middleware.CORSMiddleware'
]

  • 优化版

# my_middleware.py

from django.utils.deprecation import MiddlewareMixin


class CORSMiddleware(MiddlewareMixin):

    def process_response(self, request, response):

# response["Access-Control-Allow-Origin"] = 'http://127.0.0.1:8001'  # 只允许 http://127.0.0.1:8001 进行跨域请求
        response['Access-Control-Allow-Origin'] = '*'  # 允许所有网址进行跨域请求

# 处理预检请求
        if request.method == 'OPTIONS':
            response['Access-Control-Allow-Headers'] = 'Content-Type'  # 允许携带的请求头，response['Access-Control-Allow-Headers'] = 'Content-Type,xx,xxx'
            response['Access-Control-Allow-Methods'] = 'DELETE,PUT'  # 允许发送的请求方式，这里不用添加 GET、POST 请求
            # response['Access-Control-Max-Age'] = 10  # 本次预检请求的有效期，以秒为单位 -> 可以加和不加

        return response

# settings.py

MIDDLEWARE = [
……
    'area_b.my_middleware.CORSMiddleware'
]


← 路由系统 →