解决跨域问题-jsonp&cors

跨域的原因

浏览器的同源策略

同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

指的是从一个域上加载的脚本不允许访问另外一个域的文档属性。举个例子：比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

何谓同源

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示它们同源。

在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，但浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest 对象和Fetch发起 HTTP 请求就必须遵守同源策略。Web 应用程序通过 XMLHttpRequest 对象或Fetch能且只能向同域名的资源发起 HTTP 请求，而不能向任何其它域名发起请求。不允许跨域访问并非是浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。

解决

jsonp(JSON with Padding)

原理

首先在http:\\127.0.0.1:8000\test\下有如下返回字符串‘ok’的视图：
```
from django.http import HttpResponse

def test(request):

    return HttpResponse('ok')
```
服务端
然后在http:\\127.0.0.1:8001\域下直接用ajax发起一个跨域请求：
```
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<body>

<script>

    $.get('http://127.0.0.1:8000/test/', function (data) {

        alert(data)

    })

</script>

</body>

</html>
```
浏览器端
看效果（这里我使用的是火狐浏览器，提示更直观）：

上面有提到过<script>等标签可以加载跨域资源，我们试一下直接让script标签的src属性指向http:\\127.0.0.1:8000\test\：

浏览器端

会发现script发出的请求成功拿到响应结果：

但是控制台有一个报错：

这个问题显然是返回的内容（也就是‘ok’）被浏览器直接当做脚本执行，但window中并没有定义名字对应为‘ok’的变量。

也就是说此方式请求在服务端返回的内容是可以直接调用浏览器端js脚本的，此时我们想，如果服务端返回一个方法调用，并这个方法在对应浏览器端js脚本中有存在，通过传参的方式，是不是可以间接拿到想要返回的内容。修改服务端和浏览器端：
```
from django.http import HttpResponse

def test(request):

    return HttpResponse('func("ok")')
```
服务端
```
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<body>

<script>

    function func(data){

        console.info(data)

    }

</script>

<script src="http:\\127.0.0.1:8000\test\"></script>

</body>

</html>
```
浏览器端
此时会发现，浏览器端函数被成功调用，并且拿到了服务端返回的内容：

在这里上面的script标签是硬编码，显然也可以通过dom操作动态创建标签间接发起请求，下面要介绍的jquery的ajax就帮我们简化了这些操作。

jquery提供的jsonp

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<body>

<script>

    $.ajax({

        url: "http://127.0.0.1:8000/test/",

        dataType: "jsonp",  // 指定服务器返回的数据类型。

        // jsonp: "funcKey",   // 指定参数名称。
　　　　　　　　　　　　　　　　　　 // 如果指定，请求url会带有一组参数：funcKey=func。
　　　　　　　　　　　　　　　　　　 // 不指定默认为callback=func,具体视服务端情况而定。

        jsonpCallback: "func",  // 指定回调函数名称。

        success: function (data) {

            console.info(data);

        }

    });

</script>

</body>

</html>

因为jquery提供的jsonp的实现方式其实就是<script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，可想而知，jsonp是不支持POST方式的。

cors(Cross-origin resource sharing)

使用

我们重新看下之前跨域失败的错误：

解决跨域问题-jsonp&cors

其实浏览器已经很明显的告诉了我们原因：服务端响应缺少一个‘Access-Control-Allow-Origin’头，这个头的作用我们可以理解为服务端告诉浏览器端：“你可以跨域访问我”。修改服务端在服务端响应加上该响应头：

from django.http import HttpResponse

def test(request):

    response = HttpResponse('ok')

    response["Access-Control-Allow-Origin"] = "*"

    return response

服务端

修改客户端发送普通ajax请求：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<body>

<script>

    $.get('http://127.0.0.1:8000/test/',function(data){

        console.info(data)

    })

</script>

</body>

</html>

客户端

此时我们会发现，加上该响应头后客户端就可以像访问本源地址访问跨域地址：

解决跨域问题-jsonp&cors

响应头说明
- Access-Control-Allow-Origin(必须)
```
Access-Control-Allow-Origin=* //允许任何域名访问

Access-Control-Allow-Origin=http://127.0.0.1:8000 //仅允许指定域名访问
```
  该请求头必须包含在所有合法的CORS响应头中；否则，省略该响应头会导致CORS请求失败。该值要么与请求头Origin的值一样（如上述例子），要么设置成星号‘*’，以匹配任意Origin。如果你想任何站点都能获取到你的数据，那么就使用‘*’吧。但是，如果你想有效的控制，就将该值设置为一个实际的值。
- Access-Control-Allow-Credentials(可选)
```
Access-Control-Allow-Credentials=true
```
  默认情况下，发送CORS请求，cookies是不会附带发送的。但是，通过使用该响应头就可以让cookies包含在CORS请求中。注意，该响应头只有唯一的合法值true（全部小写）。如果你不需要cookies值，就不要包含该响应头了，而不是将该响应头的值设置成false。该响应头Access-Control-Allow-Credentials需要与XMLHttpRequest2对象的withCredentials属性配合使用。当这两个属性同时设置为true时，cookies才能附带。例如，withCredentials被设置成true，但是响应头中不包含 Access-Control-Allow-Credentials响应头，那么该请求就会失败（反之亦然）。发送CORS请求时，最好不要携带cookies，除非你确定你想在请求中包含cookie。
- Access-Control-Expose-Headers(可选)
```
Access-Control-Expose-Headers
```
  XMLHttpRequest2对象有一个getResponseHeader()方法，该方法返回一个特殊响应头值。在一个CORS请求中，getResponseHeader()方法仅能获取到简单的响应头，如下：
```
Cache-Control

Content-Language

Content-Type

Expires

Last-Modified

Pragma
```
  如果你想客户端能够获取到其他的头部信息，你必须设置Access-Control-Expose-Headers响应头。该响应头的值可以为响应头的名称，多个时需要利用逗号隔开，这样客户端就能通过getResponseHeader方法获取到了。

简单请求&复杂请求

条件

、请求方式：HEAD、GET、POST

、请求头信息：

        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

复杂请求示例

a、支持跨域，复杂请求。

、“预检”请求时，在服务端设置允许的请求方式：Access-Control-Request-Method

、“预检”请求时，在服务端设置允许的响应头：Access-Control-Request-Headers

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CorsTest</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<body>

<script>

    (function JqSendRequest(){

            $.ajax({

                url: "http://127.0.0.1:8001/test/",

                type: 'PUT',

                dataType: 'text',

                headers: {'k1': 'v1'},

                success: function(data, statusText, xmlHttpRequest){

                    console.log(data);

                }

            })

        })()

</script>

</body>

</html>

HTML

from django.shortcuts import render, HttpResponse

from django.views import View

class TestView(View):

    def options(self, request, *args, **kwargs):

        response = HttpResponse()

        response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"

        response['Access-Control-Allow-Headers'] = "k1,k2"

        response['Access-Control-Allow-Methods'] = "PUT,DELETE"

        response['Access-Control-Max-Age'] = 1

        return response

    def put(self, request, *args, **kwargs):

        response = HttpResponse()

        response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"

        return HttpResponse('ok')

Django

b、跨域获取自定义响应头。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CorsTest</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<body>

<script>

    (

        function JqSendRequest(){

            $.ajax({

                url: "http://127.0.0.1:8001/test/",

                type: 'PUT',

                dataType: 'text',

                headers: {'k1': 'v1'},

                success: function(data, statusText, xmlHttpRequest){

                    console.log(data);

                    // 获取响应头

                    console.log(xmlHttpRequest.getAllResponseHeaders());

                }

            })

        })()

</script>

</body>

</html>

解决跨域问题-jsonp&cors

HTML

from django.shortcuts import render, HttpResponse

from django.views import View

class TestView(View):

    def options(self, request, *args, **kwargs):

        response = HttpResponse()

        response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"

        response['Access-Control-Allow-Headers'] = "k1,k2"

        response['Access-Control-Allow-Methods'] = "PUT,DELETE"

        response['Access-Control-Max-Age'] = 1

        return response

    def put(self, request, *args, **kwargs):

        response = HttpResponse('ok')

        response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"

        response['testkey1'] = "testval1"

        response['testkey2'] = "testval2"

        response['Access-Control-Expose-Headers'] = "testkey1,testkey2"

        return response

Django

c、跨域传输cookie。

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

如果想要发送：

    浏览器端：XMLHttpRequest的withCredentials为true

    服务器端：Access-Control-Allow-Credentials为true

    注意：服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CorsTest</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<body>

<script>

    (

        function JqSendRequest() {

            $.ajax({

                url: "http://127.0.0.1:8001/test/",

                type: 'PUT',

                dataType: 'text',

                headers: {'k1': 'v1'},

                xhrFields: {withCredentials: true},

                success: function (data, statusText, xmlHttpRequest) {

                    console.log(data);

                }

            })

        })()

</script>

</body>

</html>

HTML

from django.shortcuts import render, HttpResponse

from django.views import View

class TestView(View):

    def options(self, request, *args, **kwargs):

        response = HttpResponse()

        response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"

        response['Access-Control-Allow-Headers'] = "k1,k2"

        response['Access-Control-Allow-Methods'] = "PUT,DELETE"

        response['Access-Control-Max-Age'] = 1

        response['Access-Control-Allow-Credentials'] = 'true'

        return response

    def put(self, request, *args, **kwargs):

        response = HttpResponse('ok')

        response['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"

        response['Access-Control-Allow-Credentials'] = 'true'

        response['testkey1'] = "testval1"

        response['testkey2'] = "testval2"

        response['Access-Control-Expose-Headers'] = "testkey1,testkey2"

        response.set_cookie('my_cookie', 'cookie value')

        return response

Django

秒客网

解决跨域问题-jsonp&cors

跨域的原因

浏览器的同源策略

何谓同源

解决

jsonp(JSON with Padding)

原理

jquery提供的jsonp

cors(Cross-origin resource sharing)

使用

响应头说明

Access-Control-Allow-Origin(必须)

Access-Control-Allow-Credentials(可选)

Access-Control-Expose-Headers(可选)

简单请求&复杂请求

条件

区别

关于预检

复杂请求示例

相关文章