vue+django分離開發的思想和跨域問題的解決

1、介紹

在先後端分離的開發過程當中，會涉及到跨域的問題，好比本次我的使用的Django+vue的框架，在vue對Django進行響應，Django再將響應的數據返回給vue，vue在進行渲染，若是不設置跨域，數據就不能雙向綁定，會出現錯誤。

2、先後端響應的基本原理

在vue中給定一個method（get/method/...）去響應後端的地址，後端在給一個反饋。交互的重點就是vue響應後端的設定好的url，好比我在Django中設置了一個url：

這個是project中的url

 這個是APP中的url

兩個連在一塊兒就是url。

而我在vue中也須要這樣去請求，才能夠將先後端鏈接起來。

3、跨域

經過前面鏈接的基本介紹，就能夠知道我在vue中的地址是http://localhost:8080/，而我在Django中的配置是http://localhost:8000/，兩個不一樣域就會出現錯誤。解決的辦法

在vue/config的ProxyTable中設置解決域衝突的問題

一、在config/index.js的文件下面修改參數

代碼以下：

除了代理的target須要更改之外，其餘的不須要更改，我嘗試了下，多是初學的緣由，感受這個api是寫死了的，換了其餘的好像有問題

 proxyTable: { '/api': { target: 'http://127.0.0.1:8000/',//設置你調用的接口域名和端口號 別忘了加http changeOrigin: true, // secure: false, // 若是是https接口，須要配置這個參數  pathRewrite: { '^/api': '/'//這裏理解成用‘/api’代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 好比我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’便可  } } }, 

 二、ajax的請求

1.安裝

在項目下面安裝axios

使用指令

npm install axios

2.使用

2.1在main.js中導入

import axios from 'axios' Vue.prototype.$http = axios

2.2在.vue函數中的調用
使用created()方法對後端進行響應

響應地址前面帶上api+本身設定的路由，就能夠完成跨域的json訪問。

4、結果

Django中的代碼

從django.http中導入JsonResponse

界面展現

5、總結

跨域問題的解決很重要，尤爲是先後端分離的狀況下。主要的問題是跨域的配置，按照我這樣的配置，在按照給出的請求方式就能夠成功，在後面的學習中會不斷的完善，最後的結果也會放到github。

6、參考

這我的blog前端的請求書寫給我提供瞭解決的方案：

https://www.cnblogs.com/now-future/articles/9887504.html

這是一些寫的好的

http://www.javashuo.com/article/p-vhrftvxh-ce.html

http://www.javashuo.com/article/p-khpmcpsa-de.html