浏览器的同源策略和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.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'

)