跨域請求

時間 2019-11-05

標籤請求简体版

原文原文鏈接

1.跨域請求

CORS即Cross Origin Resource Sharing 跨域資源共享，

那麼跨域請求還分爲兩種，一種叫簡單請求，一種是複雜請求~~

1.1簡單請求

HTTP方法是下列方法之一
　　HEAD， GET，POST

HTTP頭信息不超出如下幾種字段
　　Accept， Accept-Language， Content-Language， Last-Event-ID
　　Content-Type只能是下列類型中的一個
　　　　application/x-www-from-urlencoded
　　　　multipart/form-data
　　　　text/plain

任何一個不知足上述要求的請求，即會被認爲是複雜請求~~
複雜請求會先發出一個預請求，咱們也叫預檢，OPTIONS請求~~

demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <script>
        function handlerResponse(data) {
            console.log(data)
        }
    </script>
{#    <script src="http://127.0.0.1:8000/demo/"></script>#}
</head>
<body>
<div id="app">

</div>
<script>
    const app = new Vue({
        el: "#app",
        mounted(){
            axios.request({
                url: "http://127.0.0.1:8000/demo/",
                method: "PUT"

            }).then(function (data) {
                console.log("data----------",data)
            })
        }
    })
</script>

</body>
</html>

views.py

from django.shortcuts import render
from django.http import HttpResponse
from rest_framework.views import APIView
from rest_framework.response import Response

# Create your views here.

class DemoView(APIView):
    def get(self, request):
        res = "handlerResponse('跨域測試')"
        # res = "ce測試"
        return HttpResponse(res)

    def put(self, request):
        return Response("put接口測試")

    def post(self, request):
        return Response("POST接口測試")

1.2瀏覽器的同源策略

跨域是由於瀏覽器的同源策略致使的，也就是說瀏覽器會阻止非同源的請求~

那什麼是非同源呢~~即域名不一樣，端口不一樣都屬於非同源的~~~

瀏覽器只阻止表單以及ajax請求，並不會阻止src請求，因此咱們的cnd，圖片等src請求均可以發~~

1.3jsonp解決跨域

class DemoView(APIView):
    def get(self, request):
        #前端書寫了handlerResponse函數，來處理數據
        res = "handlerResponse('跨域測試')"
        # res = "ce測試"
        return HttpResponse(res)

1.4中間件解決跨域

上面的方式知道便可，不怎麼使用了

settings.py

MIDDLEWARE = [
    'untitled.middlewares.MyCors',
]

middlewares.py

from django.middleware.security import SecurityMiddleware
from django.utils.deprecation import MiddlewareMixin

class MyCors(MiddlewareMixin):

    def process_response(self, request, response):
        # 哪些域不攔截
        response["Access-Control-Allow-Origin"] = "*"
        if request.method == "OPTIONS":
            response["Access-Control-Allow-Methods"] = "PUT, DELETE"
            response["Access-Control-Allow-Headers"] = "content-type"
        return response

views.py

from django.shortcuts import render
from django.http import HttpResponse
from rest_framework.views import APIView
from rest_framework.response import Response

# Create your views here.

class DemoView(APIView):
    def get(self, request):
        res = "handlerResponse('跨域測試')"
        # res = "ce測試"
        return HttpResponse(res)

    def put(self, request):
        return Response("put接口測試")

    def post(self, request):
        return Response("POST接口測試")

demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <script>

    </script>

</head>
<body>
<div id="app">

</div>
<script>
const app = new Vue({
        el: "#app",
        mounted(){
            axios.request({
                url: "http://127.0.0.1:8000/demo/",
                method: "POST",
                data: {
                    "name": "Alex"
                }
            }).then(function (data) {
                console.log(data)
            })
        }
    })
</script>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。