1. 程式人生 > 其它 >《前端》illegal invocation報錯之淺談contentType = false--2021-01-08

《前端》illegal invocation報錯之淺談contentType = false--2021-01-08

技術標籤:前端#問題解決

問題描述:在使用jQuery封裝的ajax請求的時候,用於上傳圖片,表單等一系列。

裡面formData方法傳入作為data的屬性值的時候,會出現這個錯誤

contentType: false,
// 告訴jQuery不要去設定Content-Type請求頭
processData: false,
// 告訴jQuery不要去處理髮送的資料

contentType

告訴伺服器從瀏覽器提交過來的資料格式。

預設值是:contentType = "application/x-www-form-urlencoded"

如果不設定的話,我們檢視Request headers

裡面的內容

如果為contentType:false的話,

如果使用formData的方式提交表單的話,會預設contentType:'multipart/form-data'

所以這到底是什麼意思呢?

這是分界符,後面的一堆字串是隨機生成的,目的是防止上傳檔案中出現分界符導致伺服器無法正確識別檔案起始位置。如果為true的時候,jq就會去操作這個分界符,導致後臺伺服器無法操作資料,導致請求失敗。

processData

預設為true,規定通過請求傳送的資料是否轉換為查詢字串,預設情況下,通過data選項傳遞進來的資料,如果是一個物件(技術上講只要不是字串),都會處理轉化成一個查詢字串,以配合預設內容型別"application/x-www-form-urlencoded"

。如果要傳送 DOM 樹資訊或其它不希望轉換的資訊,請設定為 false。

總結來說

本次專案中用到了jQuery封裝的ajax請求,並結合了formData的形式來傳輸資料,因為用了formData會預設 contentType:'multipart/form-data',如果不用Content-Type: application/x-www-form-urlencoded,為了保證後臺能夠解析瀏覽器傳輸過去的資料的時候,我們需要設定contentType:false(防止jq去操作,失去這個分界符)。


淺談contentType = false: https://segmentfault.com/a/1190000007207128