一、同源策略
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据
浏览器上就会报错，这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险
已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:8001/SendAjax/ 的远程资源。（原因：CORS 头缺少 \'Access-Control-Allow-Origin\'）。
但是注意，项目2中的访问已经发生了，说明是浏览器对非同源请求返回的结果做了拦截
二、CORS（跨域资源共享）简介
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信
三、CORS基本流程
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。
浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
四、CORS两种请求详解
只要同时满足以下两大条件，就属于简单请求。
(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
凡是不同时满足上面两个条件，就属于非简单请求。
浏览器对这两种请求的处理，是不一样的。
* 简单请求和非简单请求的区别？ 简单请求：一次请求 非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。 * 关于“预检” - 请求方式：OPTIONS - “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息 - 如何“预检” => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过 Access-Control-Request-Method => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过 Access-Control-Request-Headers
4.1 支持跨域，简单请求：
服务器设置响应头：Access-Control-Allow-Origin = \'域名\' 或 \'*\'
4.2 支持跨域，复杂请求：
由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。
-
- “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
- “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers
五、Django项目中支持CORS
在返回的结果中加入允许信息（简单请求）
def test(request):
import json
obj = HttpResponse(json.dumps({\'name\': \'lqz\'}))
# obj[\'Access-Control-Allow-Origin\']=\'*\'
obj[\'Access-Control-Allow-Origin\'] = \'http://127.0.0.1:8004\'
return obj
放到中间件处理复杂和简单请求：
from django.utils.deprecation import MiddlewareMixin class CorsMiddleWare(MiddlewareMixin): def process_response(self, request, response): if request.method == "OPTIONS": # 可以加* response["Access-Control-Allow-Headers"] = "Content-Type" response["Access-Control-Allow-Origin"] = "http://localhost:8080" return response
六、利用django-cors-headers模块处理
1.安装cors模块
pip install django-cors-headers
2.修改setting.py中配置
INSTALLED_APPS = [ \'django.contrib.admin\', \'django.contrib.auth\', \'django.contrib.contenttypes\', \'django.contrib.sessions\', \'django.contrib.messages\', \'django.contrib.staticfiles\', \'corsheaders\', ] MIDDLEWARE_CLASSES = [ \'django.middleware.security.SecurityMiddleware\', \'django.contrib.sessions.middleware.SessionMiddleware\', \'corsheaders.middleware.CorsMiddleware\', \'django.middleware.common.CommonMiddleware\', \'django.middleware.csrf.CsrfViewMiddleware\', \'django.contrib.auth.middleware.AuthenticationMiddleware\', \'django.contrib.auth.middleware.SessionAuthenticationMiddleware\', \'django.contrib.messages.middleware.MessageMiddleware\', \'django.middleware.clickjacking.XFrameOptionsMiddleware\', ]
3.添加允许访问的白名单，凡是出现在白名单的域名都可以访问后端接口
CORS_ORIGIN_WHITELIST = ( \'127.0.0.1:8080\', \'localhost:8080\', )
CORS_ALLOW_CREDENTIALS = True # 指明在跨域访问中，后端是否支持对cookie的操作。 CORS_ALLOW_METHODS = ( \'DELETE\', \'GET\', \'OPTIONS\', \'PATCH\', \'POST\', \'PUT\', \'VIEW\', ) CORS_ALLOW_HEADERS = ( \'XMLHttpRequest\', \'X_FILENAME\', \'accept-encoding\', \'authorization\', \'content-type\', \'dnt\', \'origin\', \'user-agent\', \'x-csrftoken\', \'x-requested-with\', \'Pragma\', )
七、通过jsonp处理跨域(基于原生js)
注意：jsonp只能模拟get请求处理跨域
1、jsonp介绍
jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。下面介绍一个jsonp基本实现原理，即利用script特性实现跨域请求，如下实例：
2、基于JS的JSONP的实现
一般情况下，我们希望这个script标签能够动态的调用，我们可以通过页面的触发事件操作后，通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务。实例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>无配齐</h1> <input type="button" value="按钮2" onclick="sendMsg2();" /> <script> function sendMsg2() { var tag = document.createElement(\'script\'); tag.src = \'http://127.0.0.1:8001/api/?callback=x1\'; document.head.appendChild(tag); document.head.removeChild(tag); }
// 动态回调函数 function x1(arg) { console.log(arg); } </script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script></script> </body> </html>
为了更加灵活，上述我们将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。
from django.shortcuts import render, HttpResponse def api(request): # 获取查询字符串中的callback参数 func_name = request.GET.get(\'callback\') return HttpResponse(\'%s("baidu.com")\' % func_name)
八、通过jsonp处理跨域(基于jQuery中的getJSON方法)
基于jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法。与js实现的方式相比，我们并不要自己生成一个script标签，客户端也并不需要自己定义一个回调函数，要注意的是在$.getJSON(url,[data],[callback])方法的url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。
//项目中html中部分代码 <script> $(".ajax_btn").click(function () { $.getJSON("http://127.0.0.1:8002/send_ajax/?callback=?",function (data) { alert(data); console.log(data) }) }); </script>
//项目中的视图函数，即跨域请求的路径 def send_ajax(request): import json func_name=request.GET.get("callback") #获得回调函数的名字 dic={"k1":"v1"} print("ok") return HttpResponse("%s(\'%s\')" %(func_name,json.dumps(dic)))
八、通过jsonp处理跨域(基于jQuery中的ajax方法)
上述这种方法，很方便，不需要我们自己定义回调函数和指定回调函数名，但是，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现。如下例：
//项目中html中部分代码 <script> $(".ajax_btn").click(function () { $.ajax({ url:"http://127.0.0.1:8002/send_ajax/", dataType:"jsonp", //相当于script标签 jsonp:\'callbacks\', //相当于路径中回调函数路径参数键值对的键 jsonpCallback:"func" //相当于路径中回调函数路径参数键值对的值，回调函数名 }) }); //定义回调函数 function func(arg) { alert(arg); console.log(arg) } </script>
//项目中的视图函数，即跨域请求的路径 def send_ajax(request): import json func_name=request.GET.get("callbacks") #获得回调函数的名字 dic={"k1":"v1"} print("ok") return HttpResponse("%s(\'%s\')" %(func_name,json.dumps(dic)))
其他方法详见如下：
摘录文章地址：https://www.zhangshengrong.com/p/9MNloW5naJ/
jsonp摘录文章地址：https://www.cnblogs.com/seven-007/p/8206519.html