$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

django中的cors（view設置以及中間件設置）

注意點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) {
                    //請求失敗
                })
            }
        }