$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) {
                    //请求失败
                })
            }
        }