Django Ajax跨域問題解決方案

跨域調用
首先下載這個插件

pip install django-cors-headers

然後在你的Django項目中的settings.py中做如下配置(install app和middleware):

INSTALLED_APPS = (

‘corsheaders’,

)

MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10

‘corsheaders.middleware.CorsMiddleware’,
‘django.middleware.common.CommonMiddleware’,

]

要注意的是,CorsMiddleware最好放的儘可能的往上,比如要 在CommonMiddleware和WhiteNoiseMiddleware的上邊,要不然設置的跨域響應頭可能起不了什麼作用。

最後配置一下你允許的跨域請求主機

允許所有主機請求你的API,這種設置下不能設置cookie,下文會說解決方案

CORS_ORIGIN_ALLOW_ALL = True

或者指定白名單。這裏注意有個坑,當前後端聯機調試的時候,前端在瀏覽器寫localhost或127.0.0.1和本機的具體IP地址在白名單裏是不一樣的,推薦調試的時候寫具體IP地址,白名單裏也寫具體IP地址。

CORS_ORIGIN_WHITELIST = (
‘172.30.203.52:8080’,
‘localhost:80’
)

其它的還有可以用正則配置白名單等,詳見github。

到這裏跨域調用是沒啥問題了,但是設置cookie還是不行。也就是說以下場景會出問題:

前臺登陸,將用戶名密碼跨域傳到後臺,後臺校驗正確,把用戶填到session裏,把sessionid放到cookie中,返回response,這個時候前端發現自己仍然處於未登錄狀態。

設置cookie
要跨域設置cookie,需要前後端的共同努力,首先看後端:

前提是插件下載好了,並且install_app和middleware都配置了。如上邊提到的,將CORS_ORIGIN_ALLOW_ALL設爲false,通過白名單的方式設定允許跨域請求的請求源,然後再設置CORS_ALLOW_CREDENTIALS配置項爲True,如下:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
‘172.30.203.52:8080’,
)

If True, cookies will be allowed to be included in cross-site HTTP requests. Defaults to False.

CORS_ALLOW_CREDENTIALS = True

至此後端配置結束,然後是前端的工作:

前端只需要在沒一個跨域的Ajax請求體中添加一個.withCredentials()字段就可以啦,jquery示例如下:

$.ajax({
url: a_cross_domain_url,
// 將XHR對象的withCredentials設爲true
xhrFields: {
withCredentials: true
}

然後前後端就可以愉快的cookie交互啦~

原文:https://blog.csdn.net/qq_30242609/article/details/73865076

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章