1. 程式人生 > >前後端分離後的,瀏覽器導致的跨域問題

前後端分離後的,瀏覽器導致的跨域問題

1、什麼是跨域?

  就是由於域名不同,或者埠不同,或者協議不同瀏覽器的同源策略就會自動將不同源的請求進行阻攔。形成跨域。

2、什麼是簡單請求?  

  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請求~~

2、解決方法

  寫一箇中間件,將瀏覽器拒絕的都讓他允許就好。

  

<button id="my_button">點我你將有意想不到的收穫</button>
    <script>
        $("#my_button").click(function () {
            $.ajax({
                url:"http://127.0.0.1:8000/cors/my_cors/
", type:"put", # 複雜請求的請求方法,需要中介軟體中允許Methods contentType:"application/json", # 配置了ContentType,中介軟體中要寫相應的命令允許 success:function (data) { console.log(data) } }) })
</script>

 

from django.utils.deprecation import MiddlewareMixin


class MyCors(MiddlewareMixin):
    def process_response(self, request, response):
        # 寫了這條命令後,預設允許所有
        response["Access-Control-Allow-Origin"] = "*"
        # 如果是複雜請求,就會先發送一個OPTIONS進行預檢測
        if request.method == "OPTIONS":
            # 當AJAX 請求中如果設定了ContentType,就需要在中介軟體中寫這條允許Content-Type
            response["Access-Control-Allow-Headers"] = "Content-Type"
            # 如果是put,patch,delete 等請求方式,需要先配置以下命令
            response["Access-Control-Allow-Methods"] = "PUT,PATCH,DELETE"
        return response
中介軟體中配置,解決跨域

  然後在settings的中介軟體中註冊該中介軟體