VUE django 跨域、csrf令牌的問題

更新時間：2024年09月21日 10:11:34 作者：貪玩的小金魚

在Vue和Django進行前后分離開發(fā)時,經(jīng)常會遇到跨域和CSRF令牌驗證問題,本文詳細介紹了如何在Django后端設置視圖獲取CSRF令牌,并在Vue前端進行配置以確保安全的數(shù)據(jù)交互,文章提供了后端視圖創(chuàng)建、settings配置以及前端axios請求封裝的具體方法

跨域問題

使用VUE django前后分離，跨域跟django CSRF令牌是個很頭疼問題，跨域問題解決方法很多，bing一下就有很多這里先略過，主要講一下令牌用法，取消令牌檢測這里有提到django開發(fā)。

django前后分離 CSRF獲取及使用

首先要獲取CSRF令牌，django中GET請求是不會進行CSRF驗證的，這里我們可以創(chuàng)建一個django視圖，前端通過GET請求來獲取，

Django 配置

1、獲取token的視圖

這里我寫了兩個：

第一個是前端發(fā)送GET請求直接獲取
第二個是為了服務端處理登錄請求時候通過后將token以及登錄所需的信息一并傳遞給前端

為什么想了兩個，是因為懶，如果都用第一種，后端需要處理一下json數(shù)據(jù)，就直接復制只傳遞token字符串，在封裝成json給前端。

def get_csrf_token(request):
    csrf_token = get_token(request)
    print(csrf_token)
    return JsonResponse({'csrfToken': csrf_token})
    # return csrf_token
def get_csrf_token1(request):
    csrf_token = get_token(request)
    print(csrf_token)
    return csrf_token

2、后端settings配置文件，需要配置以下信息。

CORS_ALLOW_HEADERS = [
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
    # 添加其他你需要的請求頭，這里比較多
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',    #放到前邊
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',  #還有這個
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'sbh_bly_api.middleware.CustomExceptionMiddleware',
    
]
# 配置CSRF的信任域,與跨域配置相同，這個很重要，我就是因為這個卡了一天
CSRF_TRUSTED_ORIGINS = [
    'http://127.0.0.1:8080',  # 確保與前端地址匹配
]

3、VUE前端配置

注意我的VUE項目用的ts，如果用js的請自行轉換一下。

1) axios封裝，這里對axios請求做了封裝 http.ts文件，這里的代碼，是將token存儲到了 store中，這里是取值“const token = store.state.token” 根據(jù)實際項目，和習慣來確定存儲位置。

// http.ts

import axios, { AxiosInstance,  AxiosRequestConfig,  AxiosResponse } from 'axios';
import store from '@/store';

// 創(chuàng)建 Axios 實例
const instance: AxiosInstance = axios.create({
  baseURL: 'http://127.0.0.1:8000',
  headers: {
    'Content-Type': 'application/json'
  },
});

// 請求攔截器
import axios, { AxiosInstance,  AxiosRequestConfig,  AxiosResponse } from 'axios';
import store from '@/store';

// 創(chuàng)建 Axios 實例
const instance  = axios.create({
  baseURL: 'http://127.0.0.1:8000',
  timeout: 3000,
  headers: {
    'Content-Type': 'application/json'
  },
});

// 請求相關處理 請求攔截 在請求攔截中可以補充請求相關的配置
// interceptors axios的攔截器對象
instance.interceptors.request.use(config => {
  // config 請求的所有信息
 // console.log(config);
 const token  = localStorage.token
 config.headers['X-CSRFToken'] = token
 return config // 將配置完成的config對象返回出去 如果不返回 請求講不會進行
}, err => {
 // 請求發(fā)生錯誤時的相關處理 拋出錯誤
Promise.reject(err)
})

instance.interceptors.response.use(res => {
  // 我們一般在這里處理，請求成功后的錯誤狀態(tài)碼 例如狀態(tài)碼是500，404，403
  // res 是所有相應的信息
  console.log(res)
 return Promise.resolve(res)
}, err => {
  // 服務器響應發(fā)生錯誤時的處理
  Promise.reject(err)
})
export default instance;

2）main.ts配置項，在main中配置開啟 axios 請求時發(fā)送請求頭

import axios from 'axios';
axios.defaults.withCredentials = true;

3）get 請求獲取令牌

import axios from '@/http'
const get_token = () => {
    console.log("aa")
   
    var post_data = JSON.stringify({
        username: "123",
        password: "1234"
    })
    axios({
        method: 'GET',
        url: axios.defaults.baseURL + '/api/get-csrf-token/',
        data: post_data
    })
        .then(function (response) {
            console.log(document.cookie)
         
        //    const token = document.cookie.split('=')[1];
            //請求成功，處理業(yè)務邏輯
            console.log(response.data.csrfToken)
            // store.state.token =token
            // 保存token
            store.state.token =response.data.csrfToken
        })
        .catch(function (error) {
            //請求失敗，處理業(yè)務邏輯
            console.log(error)
        })
}

如果不成功請留言我們一起解決