浏览器的同源策略和CORS跨域

浏览器的同源策略和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.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'
)
 
 
 
posted @ 2019-02-27 21:25  惊世风情  阅读(297)  评论(0编辑  收藏  举报