聊一聊跨域，Vue向Django請求數據的一些問題

1.做前后端分離

 

前端使用Vue程序，后端使用Django配合rest-framework。

那么前端Vue通過API接口拿到數據會出現跨域的問題，JSONP只是在get中會用到的，所以這里使用cors來解決一下。

一個Vue程序通過ajax或者axios發送一個請求過來，這里需要做一個允許跨域請求資源的處理。

這里寫一個中間件一勞永逸。

from django.middleware.common import CommonMiddleware
#拿到這個中間件，這個中間件繼承MiddlewareMixin

class CORSMiddleware(CommonMiddleware): 
　　def process_response(self,request,response): 

　　　　#添加響應頭 #允許什么域名來獲取我的數據 
　　　　response["Access-Control-Allow-Origin"]="*" 

　　　　#允許你攜帶Content-Type這個請求頭 
　　　　response["Access-Control-Allow-Headers"]="Content-Type" 

　　　　#允許你發送delete請求，Put請求 
　　　　response['Access-Control-Allow-Methods'] = "DELETE,PUT" 

　　　　return response

也可以直接把middlewareMixin拿過來。

class MiddlewareMixin(object):
    def __init__(self, get_response=None):
        self.get_response = get_response
        super(MiddlewareMixin, self).__init__()

    def __call__(self, request):
        response = None
        if hasattr(self, 'process_request'):
            response = self.process_request(request)
        if not response:
            response = self.get_response(request)
        if hasattr(self, 'process_response'):
            response = self.process_response(request, response)
        return response

class CORSMiddleware(MiddlewareMixin):

    def process_response(self,request,response):
        # 添加響應頭

        # 允許你的域名來獲取我的數據
        response['Access-Control-Allow-Origin'] = "*"

        # 允許你攜帶Content-Type請求頭
        response['Access-Control-Allow-Headers'] = "Content-Type"

        # 允許你發送DELETE,PUT
        response['Access-Control-Allow-Methods'] = "DELETE,PUT"

        return response

這里對在中間件就對響應信息做一個cors跨域請求。

對了記得在settings.py中加上這個中間件。

 這個中間件的原理就是瀏覽器看到了這個請求頭，做了處理

就算你在這加一個xxx=888的話，

別人通過跨域在這里也會看到這個信息。

 cors的本質就是設置響應頭

 

-跨域：
　　-為什么會有跨域？
　　　　瀏覽器有一個同源策略的限制。(會檢驗數據是否從同源拿過來的)
　　　　繞過同源策略就可以跨域
目前2種的跨域方式：
-jsonp
　　　　同源策略阻止ajax請求，不阻止具有src屬性的標簽
　　　　動態創建標簽
　　　　<script src="xxx"></script>

-cors
　　　　設置響應頭達到不阻止的的目的
　　　　

爬蟲因為沒有使用瀏覽器，所以沒有跨域問題，爬蟲只是逼真的去模擬瀏覽器