概述
在使用Django+Vue開發過程中,遇到了很多開發環境相關的問題,比如跨域,比如ajax請求參數等,本篇文章主要記錄解決在開發過程中,遇到的一些問題。
跨域不帶Cookie
在使用Vue腳手架開發的過程中,會使用Vue腳手架自帶的Server進行項目調試,Vue自帶的Server支持 hot reloading
,這個特性是非常好用的。但是在開發過程中,因為要與后端交互,所以在請求后端接口的時候,會遇到跨域問題,這個問題在一些職責劃分清楚的團隊并不存在,因為前端開發人員會才用Mock數據的方式。
Webpack配置
采用Webpack dev server的 proxyTable
即可實現代理,將請求轉發到后端的開發服務器上。配置方法如下:
proxyTable: { '/api': { target: 'http://127.0.0.1:8190/', changeOrigin: true }, '/manager': { target: 'http://127.0.0.1:8000/', changeOrigin: true, } }
將需要請求的真實地址在proxyTable里配置即可。
當然,proxyTable還有需要更高級的用法,這里就先不去踩那些不必要的坑。
Django CORS頭配置
Django配置跨域,可以自己實現,也可以使用一個比較好用的庫 django-cors-headers
。
在Django的配置文件里添加如下配置:
(1) 在 INSTALLED_APPS
配置項里配置如下:
INSTALLED_APPS = ( ... 'corsheaders', ... )
(2) 在 MIDDLEWARE_CLASSES
配置項里配置如下:
MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10 ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... ]
CorsMiddleware
的優先級要盡可能的高,如在 CorsMiddleware
前邊。
(3)增加 CORS_ORIGIN_ALLOW_ALL
配置項
在配置文件里新增 CORS_ORIGIN_ALLOW_ALL
配置項,并設置為True
CORS_ORIGIN_ALLOW_ALL = True
跨域帶Cookie
按照上面的配置對 webpack
和 Django
進行配置后,可以實現在Vue中進行跨域Ajax請求,但是請求中并不帶Cookie,如果需要帶Cookie,則需要進行如下配置。
Webpack配置
Webpack配置方法同不帶Cookie的方法相同。
Vue配置
在Vue里需要對 axios 進行全局配置,在 main.js 里增加如下配置:
axios.defaults.withCredentials = true
Django配置
如果需要在請求中帶上Cookie,Django中的跨域返回頭中就不能允許所有主機,需要指定單獨主機,配置如下:
CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_WHITELIST = ( 'localhost:8088', 'localhost:8000', '127.0.0.1:8088', '127.0.0.1:8000' ) CORS_ALLOW_HEADERS = ( 'x-csrftoken', )
其中 CORS_ALLOW_HEADERS
配置項允許在ajax請求中定義允許自定義的頭字段。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。