後端用django 前端用框架開發過程的跨域問題

前言

若後端採用django,前端打算選用框架來開發,不必自己辛苦融合
在github上可以找到已經處理好的,只要下載就可以開始project

以我熟悉的vue為例,在github上試了幾個,最後找到tmpbook/django-with-vuejs比較符合個人的規畫,而且又有中文說明XD (詳見參考資料)

試著練習開發時發現一個問題:django執行時有一個port,vue開發時也有一個port。寫get時還無妨,寫到post時就遇上跨網域存取禁止的問題

一開始傻傻的,一直build成結果檔,在從django的服務上測試
每build一次就要十來秒啊!邊開發邊debug時,超級痛苦!時間都浪費在等待上了…

後來再回去看說明,才發現文章中間有寫到開發過程中的跨域存取問題。真的是要乖乖看完readme再開始作業的QQ

以下作業幾乎就是照抄原文了
我想同樣都是初學者但用其他框架應該也有可能遇到一樣的問題
所以還是把這一塊單獨拉出來寫成一篇了
至少讓其他跟我一樣剛入門的可以少走一些歪路

要安裝django的三方套件:django-cors-headers來解決

作法

  1. 安裝套件

    1
    pip install django-cors-headers
  2. 在setting.py中的MIDDLEWARE片段引用(注意,列表有順序性)

1
2
3
4
5
6
7
8
9
10
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',
]
  1. 一樣在setting.py,後方新增
    1
    CORS_ORIGIN_ALLOW_ALL = True  # 開發完成要部署的話,記得改成False唷

浪費我一下午無盡try and error的build後,才發現的答案…-_-

參考資料

我如何使用 Django + Vue.js 快速构建项目