跨域
由于開發(fā)模式為前后端分離式開發(fā)书妻,故而通常情況下辑甜,前端和后端可能運行不同的ip或者port下材原,導致出現(xiàn)跨域問題,故而單獨說明
什么是跨域
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源袖迎,這里跨域是廣義的冕臭。
其實我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的一類請求場景燕锥。
什么是同源策略辜贵?
同源策略/SOP(Same origin policy)是一種約定,由Netscape公司1995年引入瀏覽器归形,它是瀏覽器最核心也最基本的安全功能托慨,如果缺少了同源策略,瀏覽器很容易受到XSS暇榴、CSFR等攻擊厚棵。所謂同源是指"協(xié)議+域名+端口"三者相同,即便兩個不同的域名指向同一個ip地址蔼紧,也非同源窟感。
同源策略限制以下幾種行為:
- Cookie、LocalStorage 和 IndexDB 無法讀取
- DOM 和 Js對象無法獲得
- AJAX 請求不能發(fā)送
跨域錯誤瀏覽器會在控制臺中出現(xiàn)如下錯誤:
報錯信息如下:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/test/' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
翻譯過來即是:從源地址 http://127.0.0.1:3000 發(fā)起的到http://127.0.0.1:8000/api/test/ 的XMLHttpRequest訪問違反了同源策略:因為在請求頭中沒有Access-Control-Allow-Origin的值
前端解決跨域
既然跨域是因為不同源歉井,那我同源不就完事兒了柿祈,但是后端請求地址不可能改變,所以可以在前端和后端的中間加一層代理,前端通過代理訪問后端躏嚎。
在Vue-cli工具中已經(jīng)提供了代理的功能蜜自,只需要配置即可。
在根目錄下的config/index.js文件中有如下配置項:
proxyTable: {
'/': {
target: 'http://127.0.0.1:8000/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
- '/'表示以'/'(即所有的路徑)開頭的路徑均需要代理卢佣,
- target:代理的目標服務器地址(即后端服務器地址)為 'http://127.0.0.1:8000/',
- changeOrigin重荠,為修改源:修改請求中的源地址
- pathReWrite:URL路徑重寫,對于以'/api'開頭的路徑將'/api'替換為''
后端解決跨域
后端出于安全考慮虚茶,也會對于跨域有限制戈鲁,解決方法如下:
安裝django-cors-headers
$ pip install django-cors-headers
配置settings.py文件
INSTALLED_APPS = [
...
'corsheaders',
...
]
MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware', # 注意順序
...
)
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'*'
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)