使用cors实现跨域

最新推荐文章于 2024-11-05 15:31:54 发布

weixin_30631587

最新推荐文章于 2024-11-05 15:31:54 发布

阅读量102

点赞数

文章标签：前端后端 ViewUI

原文链接：http://www.cnblogs.com/weiwu1578/articles/8810044.html

版权

在之前的学习中我们已经知道了如果我们用ajax发送跨域请求，服务器是可以接收到并且也能进行逻辑处理并返回数据的，但是这个数据到了浏览器，浏览器根据同源的规则会拒绝这个数据

然后我们通过jsonp实现了跨域访问，但是使用jsonp需要前端发送ajax时和后端都进行一定的操作，如果现在我们后端只是提供接口，而前端页面的ajax请求已经写好了，不会再修改了，那怎么实现跨域呢

CORS

随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。

使用cors就可以不修改ajax请求，而直接在服务器接口函数中进行设置，达成跨域请求

基本跨域

ajax：直接发送跨域请求

function getData() {
    $.ajax({
        url:'http://127.0.0.1:8000/service/?v1=横哥&v2=哼',
        type:'GET',
        success:function (arg) {
            alert(arg);
        }
    })
}

api：

def service(request):
    v1 = request.GET.get('v1')
    v2 = request.GET.get('v2')
    result = v1 + v2
    obj =  HttpResponse(result)
    # obj['Access-Control-Allow-Origin'] = 'http://localhost:63342,http://localhost:63343,'
    obj['Access-Control-Allow-Origin'] = '*'
    return obj

api中接收发送的数据并进行处理，在处理响应时只要给响应头添加一组键值对，键为Access-Control-Allow-Origin，值为你要实现跨域的地址，如果有多个可以用逗号隔开，如果不管哪个地址都可以可以用*

这是简单请求时，我们只需要添加这一条响应头就能实现跨域了，那么如果是非简单请求呢，首先我们要搞清楚什么是简单请求和非简单请求

条件：
    1、请求方式：HEAD、GET、POST
    2、请求头信息：
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 对应的值是以下三个中的任意一个
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

可以看出必须同时满足以上两个条件才是简单请求，那么简单请求和非简单请求有什么区别呢，在跨域访问时

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

跨域时，简单请求只会发一次请求，所以我们直接添加一条响应头就能完成，而非简单请求会发两次请求，第一次为预检，预检成功后才会再发送一次请求用于数据传输

关于预检

- 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

可以看出预检的请求方式为OPTIONS，而发送非简单请求有两种可能，一种是请求方式不是简单请求的方式，另一种是自定义了请求头信息，这两种情况要通过预检需要设置不同的响应头

下面我们就根据这两种情况分别实现跨域

自定义请求头：先预检允许头，再发起数据相关请求

ajax：发送ajax请求时，我们自定义了一条请求头信息k1

function getData() {
    $.ajax({
        url:'http://127.0.0.1:8000/service/?v1=横哥&v2=哼',
        type:'GET',
        headers:{
            k1:'v1'
        },
        success:function (arg) {
            alert(arg);
        }
    })
}

api：

def service(request):
    if request.method == 'OPTIONS':
        print('进行预检')
        obj = HttpResponse()
        obj['Access-Control-Allow-Headers'] = 'k1'
        obj['Access-Control-Allow-Origin'] = '*'
        return obj
    else:
        v1 = request.GET.get('v1')
        v2 = request.GET.get('v2')
        result = v1 + v2
        obj =  HttpResponse(result)
        # obj['Access-Control-Allow-Origin'] = 'http://localhost:63342,http://localhost:63343,'
        obj['Access-Control-Allow-Origin'] = '*'
        return obj

由于这是一次非简单请求，所以会先预检，预检的方法是OPTIONS，所以我们在api中要先写上请求方式为OPTIONS时的逻辑，在这里，由于是自定义了请求头，所以我们要在响应头中再多加一组键值对，键为Access-Control-Allow-Headers，值为自定义的请求头k1，

表示允许这个请求头，这样就可以进行这次跨域了

我们还可以给这次预检设置一个缓存时间：

“预检”缓存时间，服务器设置响应头：Access-Control-Max-Age

不寻常的方法：先预检允许方法，再发起数据相关请求

ajax：这里我们的请求方式为put

function getData() {
    $.ajax({
        url:'http://127.0.0.1:8000/service/?v1=横哥&v2=哼',
        type:'PUT',
        success:function (arg) {
            alert(arg);
        }
    })
}

api：

def service(request):
    if request.method == 'OPTIONS':
        obj = HttpResponse()
        obj['Access-Control-Allow-Origin'] = '*'
        obj['Access-Control-Allow-Methods'] = 'PUT'
        return obj
    else:
        v1 = request.GET.get('v1')
        v2 = request.GET.get('v2')
        result = v1 + v2
        obj =  HttpResponse(result)
        # obj['Access-Control-Allow-Origin'] = 'http://localhost:63342,http://localhost:63343,'
        obj['Access-Control-Allow-Origin'] = '*'
        return obj

这里我们需要给预检的响应头中设置一组新的键值对，键为Access-Control-Allow-Methods，值为请求方式PUT，这样就可以实现跨域了

跨域获取响应头

默认获取到的所有响应头只有基本信息，如果想要获取自定义的响应头，则需要再服务器端设置Access-Control-Expose-Headers

我们在ajax端一般只能获取到响应头的基本信息，如果在api中设置了一些自定义的响应头，就需要给响应头多设置一组键值对，键为Access-Control-Expose-Headers，值为我们设置的自定义响应头的键，是一个字符串，多个的话用逗号隔开

ajax：

function JqSendRequest(){
            $.ajax({
                url: "http://c2.com:8000/test/",
                type: 'PUT',
                dataType: 'text',
                headers: {'k1': 'v1'},
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                    // 获取响应头
                    console.log(xmlHttpRequest.getAllResponseHeaders());
                }
            })
        }

api：

def service(request):
    v1 = request.GET.get('v1')
    v2 = request.GET.get('v2')
    result = v1 + v2
    obj =  HttpResponse(result)
    # obj['Access-Control-Allow-Origin'] = 'http://localhost:63342,http://localhost:63343,'
    obj['Access-Control-Allow-Origin'] = '*'
        obj['xxoo'] = '123'
        obj['bili'] = '2222'
        obj["Access-Control-Expose-Headers"] =  "xxoo,bili"
    return obj

我们多设置了两个响应头xxoo和bili，如果要在请求端获取，需要多增加一个响应头Access-Control-Expose-Headers

跨域传输cookie

在跨域请求中，默认情况下，HTTP Authentication信息，Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

如果想要发送：

浏览器端：XMLHttpRequest的withCredentials为true
服务器端：Access-Control-Allow-Credentials为true
注意：服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *

ajax：

function JqSendRequest(){
            $.ajax({
                url: "http://c2.com:8000/test/",
                type: 'PUT',
                dataType: 'text',
                headers: {'k1': 'v1'},
                xhrFields:{withCredentials: true},
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
        }

转载于:https://www.cnblogs.com/weiwu1578/articles/8810044.html