解決跨域問題以及Django中POST傳遞參數錯誤

1、跨域

在進行先後端開發的時候須要涉及到跨域的問題，跨域既能夠在前端解決也能夠在後端解決。前段解決的思路就是轉換路徑，將發出的請求的url地址轉換成能夠映射成的地址。後端的解決思路是將獲取的地址轉換成能夠映射的地址。

1. 模型

1.1 前端跨域解決的模型

因爲路由router的不一樣，所以在跨域請求的時候經過更換請求源爲origin再對後端進行請求

1.2 後端跨域解決的模型

後端經過可接收的url來進行相同path的處理，揭示了先後端分析的關鍵點以及跨域解決的本質，即對相同的path進行不一樣的url的拼接，經過control的控制來調度相同的path。

後端經過能夠接受的url，來對其進行路由映射

2. 方法

2.1 後端解決跨域

Django實例

2.1.1 經過如下指令安裝corsheaders

# pip安裝指令 pip install corsheaders

2.1.2 在配置文件中配置參數

一、進入項目的settings.py文件，進行以下配置

在INSTALLED_APPS中添加corsheaders

結果

二、在middleware中間添加corsheaders中的中間件

在middle中插入下面的中間件

'corsheaders.middleware.CorsMiddleware',

結果

三、在settings.py中添加如下的內容

# 設置post的跨域 CORS_ORIGIN_ALLOW_ALL = True CORS_ALLOW_CREDENTIALS = True # 添加須要跨域的url CORS_ORIGIN_WHITELIST = [ "https://example.com", "https://sub.example.com", "http://localhost:8080", "http://127.0.0.1:9000", "http://127.0.0.1:3000" ] # 容許使用的header CORS_ALLOW_HEADERS = [ 'accept', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', ]

結果

2.2 前端解決跨域

Vue實例

2.2.1 在配置文件中配置跨域路由

進入文件./config/index.js中，在ProxyTable中添加如下內容，若是存在多個跨域，就修改/api的名字和target中的內容。

'/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’便可  } }

結果

目錄文件

配置的ProxyTable

2.2.2 調用

經過/api/後端的url地址來進行具體的響應，如我調用login/user.html，就能夠書寫成/api/login/user.html的url

結果

2、POST請求

在開發的過程當中會涉及到請求方式的問題，而在Django中對於post請求是存在問題的，所以使用POST的請求方式的時候須要咱們解決POST的衝突。解決post的請求有兩個方法：

2.1 使用csrf_token來解決

在post請求的地方加上如下內容

# 添加下面的內容來解決post響應的問題 {% csrf_token %}

結果

2.2 註釋掉中間件

註釋掉settings.py的MIDDLEWARE中的django.middleware.csrf.CsrfViewMiddleware這個中間件

3、總結

以上是一些本身實踐的總結，在網上也有不少方法，能夠去嘗試。