跨域

由于開發(fā)模式為前后端分離式開發(fā)，故而通常情況下，前端和后端可能運行不同的ip或者port下，導(dǎo)致出現(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:代理的目標(biāo)服務(wù)器地址（即后端服務(wù)器地址）為 ' 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 = TrueCORS_ORIGIN_ALLOW_ALL = TrueCORS_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',)