後端用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. 安裝套件

   pip install django-cors-headers

2. 在setting.py中的MIDDLEWARE片段引用(注意，列表有順序性)

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',
]

3. 一樣在setting.py，後方新增

   CORS_ORIGIN_ALLOW_ALL = True  # 開發完成要部署的話，記得改成False唷

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

參考資料

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