其實很多面試問HTTP的3次握手,4次揮手,我覺得價值不大,可以幫助你理解HTTP的原理,死背硬記的對於你開發沒有作用,而是去理解它就行。
URL比較簡單,就簡單介紹一下,將URL分為主要的3部分:
告訴客戶端,用什麼形式前端的數據發送到後台:application/x-www-form-urlencoded、multipart/form-data、text/plain等。
最常見的方式以鍵值對的字元串傳輸(類似URL的search),但不能傳輸文件,幾乎所有的ajax框架都是默認以此種方式發送。
這種方式會以鍵值對的形式通過分隔符鏈接,以字元串給後台,可以傳輸文件,也可以傳輸普通數據。
// 源生的form提交可設置enctype="multipart/form-data",一般表單中有文件會自動設為該值 <form action="post" enctype="multipart/form-data"></form>
// ajax請求,通過formdata對象來達成此目的 const formdata = new new FormData(); formdata.append("key","value") $.ajax({ ... data: formdata, processData: false, // 取消對數據的預處理,因為formdata不需要預處理 headers: { "Content-Type": undefined // 客戶端會自動給它設置正確的值,不要設為multipart/form-data,這樣設的後果會導致分隔符不正確 }, ... })
如果在抓包確認劃線的一致的話就是正確發送過去了。
這個很少會用到了,普通文本,可以是任意數據,除了文件。
二進位流,僅限一個文件。
告訴後台你希望返回什麼類型的數據,如xml,html,script,json,jsonp,text等,或者你跟後台約定的也可。但是實際返回的並非跟預期一致,還是由後台決定的。
如果跟後台有約定header,如token等,也可傳到後台。
headers["token"] = "MD5KEY";
跨域問題的根本問題就是同源策略,旨在防止網站被攻擊,這裡不做贅述。
簡單說,允許跨域訪問的host,必須設置,否則不允許跨域。
// 如需允許所有資源都可以訪問您的資源,您可以如此設置: Access-Control-Allow-Origin: *
// 如需允許https://developer.mozilla.org訪問您的資源,您可以設置: Access-Control-Allow-Origin: https://developer.mozilla.org
如果想跨域傳輸cookies,需要Access-Control-Allow-Credentials與XMLHttpRequest.withCredentials 或Fetch API中的Request() 構造器中的credentials 選項結合使用。Credentials必須在前後端都被配置(即the Access-Control-Allow-Credentials header 和 XHR 或Fetch request中都要配置)才能使帶credentials的CORS請求成功。
允許跨域的請求的方法。
Access-Control-Allow-Methods: POST, GET, OPTIONS
response的header中Access-Control-Allow-Headers 用於 preflight request (即會在實際請求發送之前先發送一個option請求)中,列出了將會在正式請求的 Access-Control-Expose-Headers 欄位中出現的首部信息。
簡單首部,如 simple headers、Accept、Accept-Language、Content-Language、Content-Type (只限於解析後的值為 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 三種MIME類型(不包括參數)),它們始終是被支持的,不需要在這個首部特意列出。
很多人在抓包時會很鬱悶怎麼會無端端多出了一個OPTIONS請求,請不要奇怪,這只是CORS策略的預檢請求,就像你要去跟別人借個東西,要先問問對方肯不肯一樣。
簡單的說,就是有自定義headers,Content-Type的值不屬於下列之一:application/x-www-form-urlencoded,multipart/form-data,text/plain的請求會觸發OPTIONS請求。如果產生OPTIONS請求,需要後台去響應它,允許它跨域。
PS: 我主要使用Chrome的DevTools工具
不要相信你的代碼,以抓包工具的為準!!!!!要相信如果抓包的數據有問題,那麼就是你的代碼有問題。
如果你確認你發送的數據沒問題,那麼該看看後台響應了什麼,如果響應的數據有問題,那麼是後台的責任。
HTTP STATUS