$Django 前后端之 跨域問題(同源策略) vue項目(axios跨域請求數據)

1 跨域問題（多個域之間的數據訪問）

#同源策略(ip port 協議全部相同)
#本站的只能請求本站域名的數據 

#CORS實現（跨域資源共享)
#實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。

#CORS基本流程

#1_CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）

#2_滿足一下為簡單請求
（1) 請求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭信息不超出以下幾種字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

#3_簡單請求和非簡單請求的區別？

   簡單請求：一次請求    非簡單請求：兩次請求，在發送數據之前會先發一次請求用於做“預檢”，只有“預檢”通過后才再發送一次請求用於數據傳輸。
* 關於“預檢”

-  預檢請求方式：OPTIONS - “預檢”其實做檢查，檢查如果通過則允許傳輸數據，檢查不通過則不再發送真正想要發送的消息
- 如何“預檢”
     => 如果復雜請求是PUT等請求，則服務端需要設置允許某請求，否則“預檢”不通過
        Access-Control-Request-Method
     => 如果復雜請求設置了請求頭，則服務端需要設置允許某請求頭，否則“預檢”不通過
        Access-Control-Request-Headers

from django.utils.deprecation import MiddlewareMixin

#view局部
    def test(request):
        ret=HttpResponse('ok')
       #允許http://127.0.0.1:8001域向我發請求 
        ret['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8000'
        if request.method == 'OPTIONS':
            # 所有的頭信息都允許
            ret['Access-Control-Allow-Headers'] = '*'
        return ret
#設置中間件(全局)
class xxx(MiddlewareMixin):
    def process_response (self, request, response):
        # 簡單請求:
        # 允許http://127.0.0.1:8001域向我發請求
        # ret['Access-Control-Allow-Origin']='http://127.0.0.1:8001'
        # 允許所有域向我發請求
        response['Access-Control-Allow-Origin'] = '*'
        if request.method == 'OPTIONS':
            # 所有的頭信息都允許
            response['Access-Control-Allow-Headers'] = '*'
        return response

注意點1：有個csrf跨域防偽（允許別的域訪問的  域 要把csrf中間件注掉 | 視圖全部繼承apiview,as_view 返回了 csrf_exempt(view) ） 

　　　　ret['Access-Control-Request-Header']='contenttype,token'

2 vue中的(axios跨域請求數據)

vue中的ajax:
    axios
    安裝:npm install axios
    使用:
        -先在main.js中配置:
            import axios from 'axios'
            Vue.prototype.$http=axios
        -在組件中:
            methods: {
            btton_click: function () {
                //取到對象
                let cc = this
                cc.$http.request({
                    //向其它域請求數據
                    url: 'http://127.0.0.1:8000/test/',
                    method: 'post',
　　　　　　　　　　　　data:{
　　　　　　　　　　　　//攜帶數據
}
                }).then(function (response) {
                    //拿到原數據對象，更新
                    cc.course = response.data
                }).catch(function (response) {
                    //請求失敗
                })
            }
        }