《前端》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"
總結來說
本次專案中用到了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