一、跨域
在進行前后端開發的時候需要涉及到跨域的問題,跨域既可以在前端解決也可以在后端解決。前段解決的思路就是轉換路徑,將發出的請求的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這個中間件
三、總結
以上是一些自己實踐的總結,在網上也有很多方法,可以去嘗試。