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


一、跨域

在進行前后端開發的時候需要涉及到跨域的問題,跨域既可以在前端解決也可以在后端解決。前段解決的思路就是轉換路徑,將發出的請求的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 django-cors-headers
 
        

2.1.2 在配置文件中配置參數

1、進入項目的settings.py文件,進行如下配置

在INSTALLED_APPS中添加corsheaders

結果

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

在middle中插入下面的中間件

'corsheaders.middleware.CorsMiddleware',

結果

3、在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

結果

二、POST請求

在開發的過程中會涉及到請求方式的問題,而在Django中對於post請求是存在問題的,因此使用POST的請求方式的時候需要我們解決POST的沖突。解決post的請求有兩個方法:

2.1 使用csrf_token來解決

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

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

結果

2.2 注釋掉中間件

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

三、總結

以上是一些自己實踐的總結,在網上也有很多方法,可以去嘗試。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM