浏览器的同源策略和CORS跨域
什么是同源:
域名/ip + 端口 + 协议
http协议默认端口:80
https协议默认端口:443
浏览器对于非同源的请求会拒绝接受响应信息。
前后端分离的项目一般都会涉及到跨域问题
JSONP跨域(之前的解决方案)
不足:
只能GET请求
前端和后端都要支持
原理:
利用的就是浏览器对加载静态资源不做限制,比如 <script src="跨域的地址"></script>
jQuery版JSONP
$.getJSON("http://127.0.0.1:8000/index/?callback=?", function(res){
console.log(res);
})
CORS跨域
简单请求和非简单请求
简单请求同时满足两大类条件:
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
如果发送的是PUT或DELETE请求就是费简单请求
再比如发送的是 Content-Type:application/json也是非简单请求
简单请求的处理方案:
在响应头加一个Access-Control-Allow-Origin * --》 允许任何源给我发跨域请求
在响应头加一个Access-Control-Allow-Origin 127.0.0.1:8000 --》只允许 127.0.0.1:8000 给我发跨域请求
非简单请求:
浏览器会提前发一个 OPTIONS的预检请求
在响应头加一个Access-Control-Allow-Methods:‘PUT, DELETE‘ --》允许浏览器给我发PUT和DELETE的跨域请求
在响应头加一个Access-Control-Allow-Headers: ‘Content-Type‘ --》 允许浏览器给我发请求头中修改Content-Type字段
使用django-cors-headers包
pip install django-cors-headers
在中间件中注册
MIDDLEWARE = [
‘corsheaders.middleware.CorsMiddleware‘, # 添加中间件
‘django.middleware.security.SecurityMiddleware‘,
‘django.contrib.sessions.middleware.SessionMiddleware‘,
‘django.middleware.common.CommonMiddleware‘,
# ‘django.middleware.csrf.CsrfViewMiddleware‘,
‘django.contrib.auth.middleware.AuthenticationMiddleware‘,
‘django.contrib.messages.middleware.MessageMiddleware‘,
‘django.middleware.clickjacking.XFrameOptionsMiddleware‘,
]
在Django的settings.py中配置:
CORS_ORIGIN_ALLOW_ALL = True # 允许任何网站都来发跨域请求
配置可跨域访问的白名单:
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
# ‘<YOUR_DOMAIN>[:PORT]‘,
‘127.0.0.1:8080‘
)
原文地址:https://www.cnblogs.com/hdy19951010/p/10447096.html