亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

HTTP基本知識、跨域和調(diào)試技巧

starsfun / 2151人閱讀

摘要：發(fā)送到后臺的數(shù)據(jù)見下圖這種方式會以鍵值對的形式通過分隔符鏈接，以字符串給后臺，可以傳輸文件，也可以傳輸普通數(shù)據(jù)?？缬蚩缬騿栴}的根本問題就是同源策略，旨在防止網(wǎng)站被攻擊，這里不做贅述?？蛻舳?，以為例服務(wù)端允許跨域的請求的方法。

HTTP基礎(chǔ)

其實很多面試問HTTP的3次握手，4次揮手，我覺得價值不大，可以幫助你理解HTTP的原理，死背硬記的對于你開發(fā)沒有作用，而是去理解它就行。
前端只關(guān)心URL、headers和data，接下來也圍繞著它們展開。
了解HTTP請求可以看看：https://developer.mozilla.org...

1.了解URL

URL比較簡單，就簡單介紹一下，將URL分為主要的3部分：

router，路由。路由地址可不能錯，這就跟收件地址一樣，填錯收貨的就不是既定的那個人了。

search，查詢字符串，就是?后面的字符串，以鍵值對的形式通過“&”連接，例如：“?key1=value1&key2=value2”。查詢字符串就是發(fā)送到后臺的數(shù)據(jù)，跟普通的post請求相比，get請求以明文的形式存儲在訪問歷史，瀏覽器和路由器都很容易查得到，容易泄露，所以不建議用get請求；其次一般瀏覽器都有限制URL的長度，所以不適合發(fā)送大數(shù)據(jù)量的數(shù)據(jù)。

hash，哈希值或者稱為錨，是#后面的字符串，一般作為單頁應(yīng)用的路由地址，或者文檔的錨。

2.前端常用的headers 2.1.Content-Type(重要)

告訴客戶端，用什么形式前端的數(shù)據(jù)發(fā)送到后臺：application/x-www-form-urlencoded、multipart/form-data、text/plain等。

2.2 application/x-www-form-urlencoded

最常見的方式以鍵值對的字符串傳輸(類似URL的search)，但不能傳輸文件，幾乎所有的ajax框架都是默認以此種方式發(fā)送。
發(fā)送到后臺的數(shù)據(jù)見下圖：

2.3 multipart/form-data

這種方式會以鍵值對的形式通過分隔符鏈接，以字符串給后臺，可以傳輸文件，也可以傳輸普通數(shù)據(jù)。
常用場景：

// 源生的form提交可設(shè)置enctype="multipart/form-data"，一般表單中有文件會自動設(shè)為該值



// ajax請求,通過formdata對象來達成此目的
const formdata = new new FormData();
formdata.append("key","value")
$.ajax({
...
data: formdata,
processData: false,    // 取消對數(shù)據(jù)的預(yù)處理，因為formdata不需要預(yù)處理
headers: {
   "Content-Type": undefined    // 客戶端會自動給它設(shè)置正確的值，不要設(shè)為multipart/form-data，這樣設(shè)的后果會導(dǎo)致分隔符不正確
},
...
})

如果在抓包確認劃線的一致的話就是正確發(fā)送過去了。

2.4text/plain

這個很少會用到了，普通文本，可以是任意數(shù)據(jù)，除了文件。

2.5binary

二進制流，僅限一個文件。

3 Data-Type

告訴后臺你希望返回什么類型的數(shù)據(jù),如xml，html，script，json，jsonp，text等，或者你跟后臺約定的也可。但是實際返回的并非跟預(yù)期一致，還是由后臺決定的。

4 自定義header

如果跟后臺有約定header，如token等,也可傳到后臺。

headers["token"] = "MD5KEY";
CORS跨域

跨域問題的根本問題就是同源策略，旨在防止網(wǎng)站被攻擊，這里不做贅述。
CORS是后臺的工作，但前端工程師還是要了解CORS，這樣才有后臺抬杠的資本。以下是后臺response配置CORS的headers，如果后臺不懂，請讓他了解了解CORS。

Access-Control-Allow-Origin

簡單說，允許跨域訪問的host，必須設(shè)置，否則不允許跨域。

// 如需允許所有資源都可以訪問您的資源，您可以如此設(shè)置：這很危險，建議還是維護白名單。而且‘*’有局限性
Access-Control-Allow-Origin: *

// 如需允許https://developer.mozilla.org訪問您的資源，您可以設(shè)置：
Access-Control-Allow-Origin: https://developer.mozilla.org, htto://10.10.1.12:8089
Access-Control-Allow-Credentials

如果想跨域傳輸cookies,需要Access-Control-Allow-Credentials與XMLHttpRequest.withCredentials 或Fetch API中的Request() 構(gòu)造器中的credentials 選項結(jié)合使用。Credentials必須在前后端都被配置（即the Access-Control-Allow-Credentials header 和 XHR 或Fetch request中都要配置）才能使帶credentials的CORS請求成功。

// 客戶端，以axios為例
axios.defaults.withCredentials = true

// 服務(wù)端
rsponse.headers[Access-Control-Allow-Credentials] = true
Access-Control-Request-Method

允許跨域的請求的方法。

Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers

response的header中Access-Control-Allow-Headers 用于 preflight request （即會在實際請求發(fā)送之前先發(fā)送一個option請求）中，列出了將會在正式請求的 Access-Control-Expose-Headers 字段中出現(xiàn)的首部信息。

簡單首部，如 simple headers、Accept、Accept-Language、Content-Language、Content-Type （只限于解析后的值為 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 三種MIME類型（不包括參數(shù)）），它們始終是被支持的，不需要在這個首部特意列出。

preflight request--options請求

很多人在抓包時會很郁悶怎么會無端端多出了一個OPTIONS請求，請不要奇怪，這只是CORS策略的預(yù)檢請求，就像你要去跟別人借個東西，要先問問對方肯不肯一樣。

什么情況下會發(fā)送OPTIONS請求？

簡單的說，就是有自定義headers，Content-Type的值不屬于下列之一:application/x-www-form-urlencoded，multipart/form-data，text/plain的請求會觸發(fā)OPTIONS請求。如果產(chǎn)生OPTIONS請求，需要后臺去響應(yīng)它，允許它跨域。
https://www.jianshu.com/p/b55... 可以參考篇文章。

抓包和問題分析

PS: 我主要使用Chrome的DevTools工具

確保發(fā)送的數(shù)據(jù)沒問題

不要相信你的代碼，以抓包工具的為準?。。。?！要相信如果抓包的數(shù)據(jù)有問題，那么就是你的代碼有問題。
不要相信你的代碼，以抓包工具的為準！?。。?！要相信如果抓包的數(shù)據(jù)有問題，那么就是你的代碼有問題。
不要相信你的代碼，以抓包工具的為準?。。。。∫嘈湃绻グ臄?shù)據(jù)有問題，那么就是你的代碼有問題。

URL確保跟后臺約定的一致

headers要尤其關(guān)注Content-Type(請關(guān)注上文的Content-Type)，GET請求沒有Content-Type.

請求的參數(shù)是否正確

后臺返回什么了？

如果你確認你發(fā)送的數(shù)據(jù)沒問題，那么該看看后臺響應(yīng)了什么，如果響應(yīng)的數(shù)據(jù)有問題，那么是后臺的責任。
如果是跨域的要查看有沒有響應(yīng)CORS的請求頭。

控制臺查看錯誤和警告

如果你的代碼出錯，或者http錯誤，包括CORS錯誤，控制臺會拋出錯誤，錯誤信息可以幫助你很快定位問題。
這里不會詳細介紹DevTools,但你要學會使用DevTools，它會大大提高的調(diào)試效率。

HTTP STATUS

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/103501.html

相關(guān)文章

  • 20170917 前端開發(fā)周報:JavaScript函數(shù)式編程、作用域和閉包

    摘要：用函數(shù)式編程對進行斷舍離當從業(yè)的老司機學會函數(shù)式編程時，他扔掉了的特性，也不用面向?qū)ο罅?，最后發(fā)現(xiàn)了真愛啊作用域和閉包作用域和閉包在里非常重要。旨在幫助非函數(shù)式編程的同學，能快速切入到函數(shù)式編程的理念。 1、用函數(shù)式編程對JavaScript進行斷舍離 當從業(yè)20的JavaScript老司機學會函數(shù)式編程時，他扔掉了90%的特性，也不用面向?qū)ο罅?，最后發(fā)現(xiàn)了真愛啊?。?！ https:/...

    tomener 評論0 收藏0

  • 20170917 前端開發(fā)周報:JavaScript函數(shù)式編程、作用域和閉包

    摘要：用函數(shù)式編程對進行斷舍離當從業(yè)的老司機學會函數(shù)式編程時，他扔掉了的特性，也不用面向?qū)ο罅?，最后發(fā)現(xiàn)了真愛啊作用域和閉包作用域和閉包在里非常重要。旨在幫助非函數(shù)式編程的同學，能快速切入到函數(shù)式編程的理念。 1、用函數(shù)式編程對JavaScript進行斷舍離 當從業(yè)20的JavaScript老司機學會函數(shù)式編程時，他扔掉了90%的特性，也不用面向?qū)ο罅?，最后發(fā)現(xiàn)了真愛?。。?！ https:/...

    cyixlq 評論0 收藏0

  • 20170917 前端開發(fā)周報:JavaScript函數(shù)式編程、作用域和閉包

    摘要：用函數(shù)式編程對進行斷舍離當從業(yè)的老司機學會函數(shù)式編程時，他扔掉了的特性，也不用面向?qū)ο罅?，最后發(fā)現(xiàn)了真愛啊作用域和閉包作用域和閉包在里非常重要。旨在幫助非函數(shù)式編程的同學，能快速切入到函數(shù)式編程的理念。 1、用函數(shù)式編程對JavaScript進行斷舍離 當從業(yè)20的JavaScript老司機學會函數(shù)式編程時，他扔掉了90%的特性，也不用面向?qū)ο罅?，最后發(fā)現(xiàn)了真愛?。。。?https:/...

    lentoo 評論0 收藏0

  • 基于 HTTP 請求攔截，快速解決跨域和代理 Mock

    摘要：今天這篇文章，我們會介紹幾種常見的方法和其中存在的問題，并提出如何基于請求攔截，快速解決跨域和代理問題的方案。因為沒有修改該請求，只是延遲發(fā)送，這樣就保持了原請求與業(yè)務(wù)服務(wù)器之間的所有鑒權(quán)等相關(guān)信息，由此解決了跨域訪問無法攜帶的問題。 近幾年，隨著 Web 開發(fā)逐漸成熟，前后端分離的架構(gòu)設(shè)計越來越被眾多開發(fā)者認可，使得前端和后端可以專注各自的職能，降低溝通成本，提高開發(fā)效率。 在前后端...

    dreamGong 評論0 收藏0

  • 跨域和跨域請求的方法

    摘要：存在跨域的情況網(wǎng)絡(luò)協(xié)議不同，如協(xié)議訪問協(xié)議。域名和域名對應(yīng)如訪問跨域請求資源的方法代理定義和用法代理用于將請求發(fā)送給后臺服務(wù)器，通過服務(wù)器來發(fā)送請求，然后將請求的結(jié)果傳遞給前端。定義和用法是現(xiàn)代瀏覽器支持跨域資源請求的一種最常用的方式。 1、什么是跨域？ 由于瀏覽器同源策略，凡是發(fā)送請求url的協(xié)議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況： 網(wǎng)絡(luò)協(xié)議不同，...

    wwq0327 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<