跨域介绍

什么是跨域

使用web.py做http server开发时，遇到postman能够正常请求到数据，但是浏览器无法请求到数据，查原因之后发现是跨域请求的问题。

跨域请求，就是在浏览器窗口中，和某个服务端通过某个 “协议+域名+端口号” 建立了会话的前提下，去使用与这三个属性任意一个不同的源提交了请求，那么浏览器就认为你是跨域了，违反了浏览器的同源策略。 w3c标准中，有针对跨域请求的规范，在响应头中有以下三种跨域访问限制：

Access-Control-Allow-Origin：限制允许跨域访问的源，比如http://192.168.10.12:8080，注意这里仅仅支持*（表示所有源）号或者某个源，不支持多个源，如果要实现多个源，可以自己包装一个集合，对每次的请求在集合中判断是否存在，如存在，就放到响应头中来；

Access-Control-Allow-Methods：限制允许跨域访问的http方法类型，多个以逗号隔开，比如：POST, GET, OPTIONS，PUT, DELETE

Access-Control-Allow-Headers：限制允许跨域访问的http头部，包含这里设置的头，才允许跨域访问，比如：Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization
其中一台服务器通过ajax向另一台服务器发起请求
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>

<h3>s1的首页</h3>


<button>Ajax请求</button>

<script>
    $("button").click(function () {


        $.ajax({
            url:"http://127.0.0.1:8008/books/",
            type:"post",
            contentType:"json",
            headers:{
                b:123,
            },
            data:JSON.stringify({
                bcd:222,
            }),
            success:function (res) {
                console.log(res)
            }

        })

    })
</script>

</body>
</html>
接收到请求,也会返回数据,但是被浏览器因为是跨域请求给拦截了
from django.shortcuts import render

# Create your views here.
from django.http import JsonResponse
def books(request):
    print("s2 books")
    obj = JsonResponse(["python", 'linux', "go"], safe=False)

    obj["Access-Control-Allow-Headers"]="Content-Type,b"   #  允许要访问的服务器想要带的头
    obj["Access-Control-Allow-Origin"] = "*"    #允许所有服务器进行访问


    return obj

 

posted @ 2018-12-12 17:35  团子emma  阅读(151)  评论(0)    收藏  举报