跨域和CORS

Posted 2022-04-22 zty1304368100

跨域

首先我们要知道什么是同源策略

同源是指，域名，协议，端口相同。

跨域

域名,协议,端口有一个不一样都是跨域,简单的解释一下,,你从你从端口号为8000去请求8001的数据就是跨域.
如果想解决跨域问题,需要浏览器同时支持,我们这里用CORS（Cross-origin resource sharing ("跨域资源共享"))来解决跨域的问题

CORS（解决跨域的方法之一）

整个CORS通信都是浏览器自动执行的，不需要用户的参与，因此实现CORS的关键就是服务器，只要服务器实现了CORS接口，就可以实现跨域请求

浏览器将CORS请求分为两类，一类是简单请求，另一类是非简单请求

只要满足以下两个条件就是简单请求

（1) 请求方法是以下三种方法之一：（也就是说如果你的请求方法是什么put、delete等肯定是非简单请求）
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，
　　也就是说，如果你发送的application/json格式的数据，那么肯定是非简单请求，vue的axios默认的请求体信息格式是json的，ajax默认是urlencoded的

只要不满足以上两个条件，就是非简单请求

简单请求和非简单请求的区别

简单请求和非简单请求的区别？

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

- 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

简单请求跨域解决方法，在请求头中加入一个响应头信息（cors）

from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def books(request):

    obj = JsonResponse([‘西游记2‘,‘三国演义2‘,‘水浒传2‘],safe=False)
    #下面这个响应头信息是告诉浏览器，"*" 代表谁请求都可以
    # obj["Access-Control-Allow-Origin"] = "*"
    obj["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000" #只有这个ip和端口来的请求，我才给他数据，其他你浏览器帮我拦着
    return obj

另外我们要了解浏览器的一种机制

1.阻止ajax请求
2.放行src属性

实现跨域的另一种方式，不常用（jsonp）

动态生成一个script标签，让这个标签发送ajax请求（但是有个限制，他只能发送GET请求）