跨域

1. 为什么会有跨域？ 

 　---  浏览器的同源策略的限制：当前域名或者url访问时，回来的数据浏览器会检验是不是和当前的域名一致；只有一致才让数据回来；

2. 绕过浏览器同源策略就可以跨域：

　　1. jsonp

　　　　本质上就是动态创建 script 标签： 同源策略会阻止ajax请求，但不阻止具有 src 属性的标签，如 <script src="xxxx"></script>；缺点：只支持GET不支持POST请求

　　2. cors

　　　　本质：设置响应头

3. vue + rest framework 会有跨域，需要在后端解决，如跨域中间件

# 跨域中间件：
class CORSMiddleware(MiddlewareMixin):
    def process_response(self,request,response):
        # 添加响应头
        
        # 简单请求（）：
        # 允许你的域名来获取我的数据
        response['Access-Control-Allow-Origin'] = 'www.xxx.com/8888'  # Access-Control-Allow-Origin ：固定写法；# 多个域名用“,”隔开，“*”表示所有的域名
        
        # 复杂请求（如 自定义了请求头，或者指定了特定的方法，就会把跨域变成复杂请求）
        # 对于vue，还需要加上下面这句
        if request.method == "OPTIONS":
            # 请求头
            response['Access-Control-Allow-Headers'] = 'Content-Type'  # 允许携带 Content-Type 请求头 # 请求头不能用 “*”  # 如果请求头有多个，则 'Content-Type,其它的请求头...'
        
            # 允许发送 DELETE,PUT
            response['Access-Control-Allow-Methods'] = 'DELETE,PUT'
        
        return response

4. 简单请求和复杂请求

条件：
    1、请求方式：HEAD、GET、POST
    2、请求头信息：
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 对应的值是以下三个中的任意一个
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
# 注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

# 简单请求：一次请求
# 非简单请求：两次请求，在发送数据之前会先发一次options请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。        

5. 出现跨域的条件：

• 域名不同
• 端口不同

6. 跨域解决：

# CORS: 本质就是设置一个响应头
响应头常见的有三类：
    
    # 允许你的域名来获取我的数据
    response['Access-Control-Allow-Origin'] = 'www.xxx.com/8888'  # Access-Control-Allow-Origin ：固定写法；# 多个域名用“,”隔开，“*”表示所有的域名

    # 对于vue，还需要加上下面这句
    # response['Access-Control-Allow-Headers'] = 'Content-Type'  # 允许携带 Content-Type 请求头 # 不能用 “*”

    # 允许发送 DELETE,PUT
    response['Access-Control-Allow-Methods'] = 'DELETE,PUT'

应用：本地开发前后端分离项目时使用（如：rest framework 项目 + vue 项目）