情景描述
- create React app中使用fetch 發(fā)送跨域http請(qǐng)求
fetch('/todos',{
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json'
})
body:{text,user_id:1}
}).then(.....)
- 使用create React app的proxy進(jìn)行請(qǐng)求的跨域轉(zhuǎn)發(fā)
"proxy": "http://localhost:8080"
- 發(fā)送請(qǐng)求
http://localhost:3000/todos返回狀態(tài)碼400 - 使用postman發(fā)送POST請(qǐng)求
http://localhost:8080/todos選擇raw --> application/json
{
"text":"1111",
"user_id":1
} //成功返回狀態(tài)碼201
矛盾
- postman和使用fetch發(fā)送的請(qǐng)求body類型完全一致路徑完全一致佳遂，按照道理來說如果postman能夠成功贷腕，那么fetch一定也能成功馆纳，那么為什么使用fetch發(fā)送會(huì)出現(xiàn)request body missing 導(dǎo)致400錯(cuò)誤？
- 問題可能在于：
- 1.fetch發(fā)送json body的用法有誤
- 2.postman還設(shè)置了別的header
解決
- Q1:400狀態(tài)碼代表什么樣的錯(cuò)誤睛琳？
- A1:400狀態(tài)碼說明你發(fā)送的請(qǐng)求服務(wù)器接收到了但是不能識(shí)別請(qǐng)求內(nèi)容。
- Q2:postman選擇的raw application/json到底是什么格式的請(qǐng)求？
- A2:body tab中的4中不同方式虐呻，會(huì)對(duì)應(yīng)著不同的head content-type，選擇raw就可以向面板中填入任何類型的數(shù)據(jù)寞秃，通過選擇application/json確定postman會(huì)發(fā)送一個(gè)使用json解析器能夠解析的實(shí)體到服務(wù)器斟叼。
- Q3:請(qǐng)求head中content-type有什么作用？
- A3:Content-Type屬性作用其實(shí)是：當(dāng)你發(fā)送請(qǐng)求設(shè)置Content-Type:application/json春寿，就是相當(dāng)于告訴服務(wù)器朗涩，你應(yīng)該采用解析json的方式解析我的請(qǐng)求體，但是請(qǐng)求體是否是json格式就不一定了绑改。如果未指定 ContentType谢床，默認(rèn)為text/html。因此說明此時(shí)我告訴了服務(wù)器用json解析器解析body厘线。
Q4:fetch post json的標(biāo)準(zhǔn)方式是什么呢识腿？
-
A4:查詢官網(wǎng)發(fā)現(xiàn)
fetch('/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Hubot', login: 'hubot', }) })發(fā)現(xiàn)官網(wǎng)上使用了json.stringify，因此確定問題原因：我沒有使用fetch正確的傳送json body的格式造壮。
- Q5:那么為什么postman成功了渡讼，但是fetch沒有？
- A5:首先postman一定能夠把你輸入的對(duì)象變成使用Application/json就能解析的形式發(fā)送給服務(wù)器耳璧，然而這個(gè)過程我們是看不到的成箫。如果僅僅把body寫成相同的樣子，fetch會(huì)把這個(gè)body包裝成什么樣子發(fā)走我們不知道旨枯。因此postman和fetch即使body完全一致header完全一致蹬昌，也不一定結(jié)果一樣。fetch需要把body stringify了之后發(fā)走才能使用Application解析攀隔。
我的錯(cuò)誤點(diǎn)
- 錯(cuò)誤的以為content-type的作用是把body變成某種類型皂贩。其實(shí)他只是告訴服務(wù)器使用哪種方式解析你的body。
反思
- fetch發(fā)送請(qǐng)求的方式我并不了解昆汹，并且不是很會(huì)使用先紫，只是想當(dāng)然的隨便寫，寫不對(duì)再試再試筹煮。并沒有想到參照官網(wǎng)遮精。
action
- 使用任何新的東西，如果遇到bug，那么應(yīng)該立刻去看官網(wǎng)對(duì)這種問題的做法本冲。
