django+vue前後端分離プロジェクトを作成する際、ドメイン間問題の解決!


1、まずdjango-cors-headersというパッケージをインストールします
pip install django-cors-headers

2、settingsを配置する.py
appのインストール
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #     django-cors-headers     app
    'corsheaders'
]

必須パラメータの構成
#  debug  ,          debug
DEBUG = True
#     ip  
ALLOWED_HOSTS = ['*']
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
#        
CORS_ALLOW_HEADERS = ('*')

必要なミドルウェアの構成
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', #    ,      
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware', 
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware', #           
]

VUEがバックグラウンドデータにaxiosの使用を要求することは、現在最も流行しており、最良である.VUEの正常なリクエストバックグラウンドを作成するにはaxiosを構成する必要があります
3、VUE構成
まずプロジェクトにaxiosをインストールします
npm install axios -s
  
npm install axios --save

次にmainを構成します.jsグローバルaxiosの使用
//  axios
import Axios from 'axios';
//    axios
Vue.prototype.$axios = Axios;
//     ,    ,           POST       
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-fromurlencodeed'

問題と思考
これで他の人のフロントエンドや不正なリクエストも私のバックグラウンドデータにアクセスできるのではないでしょうか.この問題は、セキュリティ認証やログイン認証に関連しています.現在最も流行し、効率的なのはJWT認証方式を採用することです.簡単な説明は、私が保護する必要があるバックグラウンドデータは認証されてから正常に取得する必要があります.そうしないと、取得できません.この認証は、JWT方式(json web token)の現在のエンドがログインを要求すると、一意の識別で有効期間のあるtokenをフロントエンドに返すことに成功します.そしてフロントエンドはこのtokenとユーザ情報をすべてデータセンターとブラウザのクッキーとseesionに保存し、同時に後でバックグラウンドデータを要求するたびにこのtokenをheadersに携帯する.バックグラウンドでは、フロントエンドから伝わってきたtokenに基づいて、私のユーザーかどうかを判断します.これで安全の問題が解決した.