axios03 解決請求頭相容導致跨域報錯問題

2021-10-04 20:37:56 字數 2898 閱讀 5064

不同版本介面區別

老版本介面(form形式)

新版本介面(json形式)

請求頭引數格式

序列化字串:key1=value1&key2=value2json格式字串 :

介面請求頭和引數錯誤提示

(1)伺服器返回:引數錯誤

(2)狀態碼400

(1)伺服器返回:引數錯誤

(2)狀態碼400

(3)跨域報錯

2.將引數拼接為:key1=value1&key2=value2

/*

1.學習目標介紹 : axios解決post請求相容性問題

2.學習路線 :

(1)post請求頭型別

a.在很久很久以前,ajax技術沒有發明以前,瀏覽器傳送請求

b.後來ajax技術發明之後,由於之前的伺服器處理post請求都是按照表單的預設請求頭方式來處理

c. axios技術發明之後,此時json資料格式傳輸已經越來越流行,所以在axios中

d. 不同的請求頭,伺服器在處理的時候方式不一樣。所以前後端必須要統一

總結:這種方式引數會以: 'key1=value1&key2=value2'形式傳輸

後台處理方式:字串切割獲取引數

這種方式引數會以json格式傳輸: ''

這種方式處理:json.parse()解析

(2)axios解決post請求相容性

a. 如果你的後台是新介面,則不需要任何處理。(axios預設json格式)

b. 如果你的後台是老介面

(2)需要將引數轉為拼接方式:key1=value1&key2=value2

(3)使用axios後如何判斷後台是老介面還是新介面?

a. 有的伺服器會返回一段文字提示你:引數格式錯誤

b. 有的伺服器直接返回400錯誤碼,也是提示你引數格式錯誤

c. 有的伺服器會直接報錯跨域

點我傳送post請求(老介面)button

>

"btn2"

>

點我傳送post請求(新介面)button

>

src=

"./axios.js"

>

script

>

src=

"./qs.js"

>

script

>

action="

" enctype

=>

form

>

>

/* 1.學習目標介紹 : axios解決post請求相容性問題

2.學習路線 :

(1)post請求頭型別

a.在很久很久以前,ajax技術沒有發明以前,瀏覽器傳送請求

b.後來ajax技術發明之後,由於之前的伺服器處理post請求都是按照表單的預設請求頭方式來處理

c. axios技術發明之後,此時json資料格式傳輸已經越來越流行,所以在axios中

d. 不同的請求頭,伺服器在處理的時候方式不一樣。所以前後端必須要統一

總結:這種方式引數會以: 'key1=value1&key2=value2'形式傳輸

後台處理方式:字串切割獲取引數

這種方式引數會以json格式傳輸: ''

這種方式處理:json.parse()解析

(2)axios解決post請求相容性

a. 如果你的後台是新介面,則不需要任何處理。(axios預設json格式)

b. 如果你的後台是老介面

(2)需要將引數轉為拼接方式:key1=value1&key2=value2

(3)使用axios後如何判斷後台是老介面還是新介面?

a. 有的伺服器會返回一段文字提示你:引數格式錯誤

b. 有的伺服器直接返回400錯誤碼,也是提示你引數格式錯誤

c. 有的伺服器會直接報錯跨域

*///post請求:老介面

/* 1.設定請求頭:

2.將引數轉為字串拼接方式

一般使用第三庫qs來轉換

*/btn1.

onclick

=function()

);console.

log(str1)

;//(2)使用js原生物件urlsearchparams來處理 (好處:不需要匯入qs庫)

// var param = new urlsearchparams();

axios(}

).then

(res =>)}

;//post請求:新介面

//不需要任何處理

btn2.

onclick

=function()

,}).

then

(res =>)}

;script

>

body

>

html

>

axios原生請求設定請求頭

工作中專案使用的是前端的vue框架,請求用的是自己封裝好的axios,api請求均已封裝成方法,在頁面中使用時直接import 然後寫在自己的自定義觸發方法中即可。然而遇到乙個棘手的問題就是有乙個超級大的表單無論怎麼調都是錯誤,服務端不能接受到引數,然後試著換成原生的頁面請求後,服務端可以收到請求和...

封裝axios,帶請求頭和響應頭

import axios from axios import qs from qs 處理引數 import router from router import from element ui import from element ui let loading null 開始載入動畫 functio...

Axios請求封裝乙個公共的請求頭

assets commom js 下新建乙個js檔案 eg requestparams.js function buildrequestparam conparam con conparam return param 重要的事情說三遍,一定要匯出,一定要匯出,一定要匯出 export default...