vue+django開發配置(vue轉發請求、跨域攜帶cookie)

開發中：

由於vue有個前端服務器做內容轉發，所以前端服務器和后端服務器的交互是跨域的狀態，不會攜帶cookie

 

vue代理的作用：

例如：前端服務器是127.0.0.1:8080，后端服務器是127.0.0.1:9000，那么前端訪問后端資源就是跨域的，獲取靜態資源和調用后端接口都得定義一個地址才可正常訪問

代理會將設置的路徑轉發至127.0.0.1:9000，所以只需要配置好代理，前端就可以直接輸入后端路徑即可

 

vue代理轉發配置：

(為了轉發請求，上線時候不需要改代碼)

// vue.config.js中配置

module.exports = {
  devServer: {
    host: "0.0.0.0",  // 前端啟用的地址, 0.0.0.0表示綁定該機器的所有ip地址
    port: "8080",     // 前端啟用的端口
    disableHostCheck: true,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9000',　　// 請求的域名 + 端口，當別人要訪問時候不能是127.0.0.1
        changeOrigin: true,　　　　　　// 是否跨域
      },
      '/static': {     //這里最好有一個 /
        target: 'http://127.0.0.1:9000',  // 后台接口域名
        changeOrigin: true,  //是否跨域
      }
    }
  },
}

// 當訪問/static/image/1.png時候，代理會轉發到http://127.0.0.1:9000/static/image/1.png

 

 

 

django后端跨域配置：

// 為了前端能正常請求非get請求，並且可以攜帶cookie

安裝模塊：pip install django-cors-headers

 

settings配置：

1. INSTALLED_APPS中添加corsheaders

 

 2. 添加中間件

'corsheaders.middleware.CorsMiddleware',

 

 3. 添加這個中間件的配置信息 // 底部即可

CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    # 'http://127.0.0.1:8080',
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
    'Cookie',
)

 

 

前端axios跨域攜帶cookie

// axios跨域請求攜帶cookie

 withCredentials:true  // 請求攜帶cookie

 

以上配置完就可以正常的vue和django合一開發了！