一、原理
同源？同源策略？
同源的定義是：兩個頁面的協議、端口和域名都相同
同源的例子：
不同源的例子：
同源策略SOP（Same origin policy）是一種瀏覽器約定，它是瀏覽器最核心也最基本的安全功能，為了防止瀏覽器受到XSS、CSFR的攻擊，瀏覽器采用了同源策略，用於限制一個源加載的文檔或腳本與另一個源的交互。
在我們的項目中，前端的vue和后端的django分別使用不同的端口，因此受到同源策略的限制，在沒有跨域配置的初期，無法進行正常通信。
跨域？什么域？
跨域顧名思義就是一個網域向另一個網域發起資源交互，比如我們的前端http://localhost:9528與后端http://127.0.0.1:8000由於端口號的不同，處在不同的網域（源），因此進行api請求獲取資源自然就是違反同源策略的跨域操作。
后端端口：
前端端口：
二、使用CORS解決跨域問題
跨域資源共享(CORS) 是一種機制，它使用額外的 HTTP 頭來告訴瀏覽器 讓運行在一個 源 (網域) 上的Web應用被准許訪問來自不同源服務器上的指定的資源。當一個資源從與該資源本身所在的服務器不同的域、協議或端口請求一個資源時，資源會發起一個跨域 HTTP 請求。
Django CORS
1）安裝django-cors-headers模塊
pip install django-cors-headers
2） 在settings.py中配置
- 添加應用
INSTALLED_APPS = [
...
'corsheaders',
...
]
- 添加中間件
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
- 添加白名單並允許訪問白名單
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8000',
'http://localhost:9528', #凡是出現在白名單中的域名，都可以訪問后端接口
)
CORS_ALLOW_CREDENTIALS = True # 允許攜帶cookie
Vue Proxy
在vue.config.js中配置proxy代理
devServer: {
...
proxy: {
'^/api': {
target: 'http://127.0.0.1:8000',
changeOrigin: true, // 允許跨域
pathRewriter: {
'^/api' : ''
}
}
},
...
},
其中，^/api表示以"/api"開頭的url將會代理到target對應的網域中，pathRewriter表示將url中的"/api"改寫為""，也就是刪去。
三、踩坑/經驗
-
在vue.config.js里配置proxy，並修改請求的url后仍無法連接到后端
- 解決：
url最后忘了'/'，導致和后端不匹配，會有404、500等錯誤- 后端服務未打開或出現其他錯誤，也會報code為500的錯
api中添加request，記得修改url和baseURL（比如我們使用vue-element-admin，默認是/dev-api，改成空），否則在請求的url中間會多一個/dev-api，取不到數據proxy中的拼寫錯誤也會導致無法處理跨域，比如"pathRewriter"寫成"pathRewrite"
- 解決：
-
在后來實驗中，發現Django的CORS和Vue的proxy只需配置其一，就能實現跨域資源共享