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

)