最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

概述

作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機構(gòu)，我們在業(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)建站提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價值。

在使用Django+Vue開發(fā)過程中，遇到了很多開發(fā)環(huán)境相關(guān)的問題，比如跨域，比如ajax請求參數(shù)等，本篇文章主要記錄解決在開發(fā)過程中，遇到的一些問題。

跨域不帶Cookie

在使用Vue腳手架開發(fā)的過程中，會使用Vue腳手架自帶的Server進行項目調(diào)試，Vue自帶的Server支持 hot reloading ，這個特性是非常好用的。但是在開發(fā)過程中，因為要與后端交互，所以在請求后端接口的時候，會遇到跨域問題，這個問題在一些職責劃分清楚的團隊并不存在，因為前端開發(fā)人員會才用Mock數(shù)據(jù)的方式。

Webpack配置

采用Webpack dev server的 proxyTable 即可實現(xiàn)代理，將請求轉(zhuǎn)發(fā)到后端的開發(fā)服務(wù)器上。配置方法如下:

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配置跨域，可以自己實現(xiàn)，也可以使用一個比較好用的庫 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 的優(yōu)先級要盡可能的高，如在 CorsMiddleware 前邊。

（3）增加 CORS_ORIGIN_ALLOW_ALL 配置項

在配置文件里新增 CORS_ORIGIN_ALLOW_ALL 配置項，并設(shè)置為True

CORS_ORIGIN_ALLOW_ALL = True

跨域帶Cookie

按照上面的配置對 webpack 和 Django 進行配置后，可以實現(xiàn)在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請求中定義允許自定義的頭字段。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。