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

)