本篇內(nèi)容介紹了“如何配置ajax請(qǐng)求跨域攜帶cookie”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、惠水網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為惠水等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

有些同學(xué)看到這個(gè)文章標(biāo)題有點(diǎn)暈，這是個(gè)什么情況呢？

首先咱們來(lái)看一下前后端數(shù)據(jù)交互的一些規(guī)則：

1、同域名下發(fā)送ajax請(qǐng)求，請(qǐng)求中默認(rèn)會(huì)攜帶cookie

2、ajax在發(fā)送跨域請(qǐng)求時(shí)，默認(rèn)情況下是不會(huì)攜帶cookie的

3、ajax在發(fā)送跨域請(qǐng)求時(shí)如果想攜帶cookie，必須將請(qǐng)求對(duì)象的withcredentials屬性設(shè)置為true。

4、此時(shí)服務(wù)端的響應(yīng)頭Access-Control-Allow-Origin不能為*（星號(hào)）了，必須是白名單樣式，也就是必須設(shè)置允許哪些url才能訪問(wèn)，如：

Access-Control-Allow-Origin: http://api.bob.com

5、除了對(duì)響應(yīng)頭Access-Control-Allow-Origin的設(shè)置，還必須設(shè)置另外一個(gè)響應(yīng)頭：Access-Control-Allow-Credentials:true。

接下來(lái)咱們來(lái)一條條驗(yàn)證：

1、同域名下發(fā)送ajax請(qǐng)求，請(qǐng)求中默認(rèn)會(huì)攜帶cookie，

我們用express構(gòu)建一個(gè)靜態(tài)資源服務(wù)器端口為3000，然后新建一個(gè)頁(yè)面，在頁(yè)面中直接調(diào)用jquery的ajax方法，直接調(diào)用此方法會(huì)向當(dāng)前url發(fā)送一個(gè)get請(qǐng)求：

然后我們看network：

此時(shí)時(shí)攜帶有cookie的。

2、ajax在發(fā)送跨域請(qǐng)求時(shí)，默認(rèn)情況下是不會(huì)攜帶cookie的。

這次我們?cè)谟胑xpress搭建一個(gè)服務(wù)器，端口號(hào)為5000，然后在3000端口號(hào)的服務(wù)器上面的網(wǎng)頁(yè)中發(fā)送ajax請(qǐng)求5000服務(wù)器的接口，看看請(qǐng)求結(jié)果:

network:

仔細(xì)觀察是沒(méi)有cookie的。

接著看第三條：

3、ajax在發(fā)送跨域請(qǐng)求時(shí)如果想攜帶cookie，必須將請(qǐng)求對(duì)象的withcredentials屬性設(shè)置為true。我們?nèi)绻褂胘query發(fā)送ajax的話需這樣設(shè)置withcredentials屬性：

此時(shí)查看network：

此時(shí)cookie又回來(lái)了，到此為止前端人員的設(shè)置就算完成了，雖然現(xiàn)在ajax執(zhí)行后，最終調(diào)用的是錯(cuò)誤回調(diào)，那是因?yàn)楹蠖诉€不支持cors。

此時(shí)我們驗(yàn)證第四條：

4、此時(shí)服務(wù)端的響應(yīng)頭Access-Control-Allow-Origin不能為*（星號(hào)）了，必須是白名單樣式，也就是必須設(shè)置允許哪些url才能訪問(wèn)，如：

Access-Control-Allow-Origin: http://api.bob.com

首先在服務(wù)端開(kāi)啟cors，并且將Access-Control-Allow-Origin的值設(shè)置為*。

通過(guò)express構(gòu)建的服務(wù)只需要加載cors中間件，并調(diào)用這個(gè)中間件，不需要設(shè)置任何參數(shù)默認(rèn)就會(huì)設(shè)置Access-Control-Allow-Origin為*。

重啟 端口為5000的服務(wù)器，查看network請(qǐng)求頭信息是這樣的：

此時(shí)cookie是攜帶過(guò)去的，這一點(diǎn)通過(guò)上面的實(shí)驗(yàn)已經(jīng)驗(yàn)證過(guò)了。

而響應(yīng)頭信息是這樣的：

響應(yīng)頭中設(shè)置了Access—Control—Allow—Origin：*，說(shuō)明已經(jīng)支持跨域了。

但是ajax調(diào)用后執(zhí)行的還是錯(cuò)誤回調(diào)，并且console面板打印了一個(gè)錯(cuò)誤：

大致意思就是：如果前端請(qǐng)求中的withcretentials的屬性為true，后端響應(yīng)頭中的Access-Control-Allow-Origin絕對(duì)不能是*。所以會(huì)報(bào)錯(cuò)，此時(shí)如果將ajax請(qǐng)求中的withcretentials屬性去掉或者設(shè)置成false，就不會(huì)報(bào)錯(cuò)了，但是那樣的話，就不會(huì)攜帶cookie了。

那需要后端如何設(shè)置才能支持前端發(fā)送ajax請(qǐng)求攜帶cookie呢，Access-Control-Allow-Origin必須設(shè)置成這樣子：Access-Control-Allow-Origin: http://api.bob.com，而在express搭建的服務(wù)器中只需要配置cors中間件的一個(gè)參數(shù)就可以了。

此時(shí)查看network，請(qǐng)求頭信息：

完美攜帶cookie的，

看看響應(yīng)頭：

響應(yīng)頭中Access-Control-Allow-Origin的值設(shè)置成了白名單，但是等等，此時(shí)為什么ajax調(diào)用后，還是執(zhí)行錯(cuò)誤毀掉呢？

繼續(xù)看第五條：

5、除了對(duì)響應(yīng)頭Access-Control-Allow-Origin的設(shè)置還必須設(shè)置另外一個(gè)響應(yīng)頭：Access-Control-Allow-Credentials:true。

在cors中間件中配置一個(gè)參數(shù)就可以了：

此時(shí)查看network的響應(yīng)頭信息：

查看響應(yīng)頭多了一個(gè)Access-Control-Allow-Credentials：true，此時(shí)ajax的回調(diào)終于是成功回調(diào)了。

總結(jié)一下，如果公司項(xiàng)目采用前后端分離，后端接口形式以cors支持跨域，而此時(shí)前端發(fā)送ajax請(qǐng)求需要攜帶cookie，前端請(qǐng)求必須設(shè)置XMLhttprequest實(shí)例的withCredenetials屬性為true，服務(wù)端必須設(shè)置Access-Control-Allow-Origin為白名單樣式，并且需要在響應(yīng)頭中設(shè)置：Access-Control-Allow-Credentials為ture。

cors除了cookie的限制，請(qǐng)求頭也做了限制，客戶端如果想發(fā)送自定義請(qǐng)求頭，服務(wù)端必須設(shè)置Access-Control-Allow-Headers為*，或者白名單的樣式，這里使用express中間件的同學(xué)注意，cors中間件默認(rèn)Access-Control-Allow-Headers為*，也就是說(shuō)直接使用cors中間件可以允許客戶端傳遞任何自定義請(qǐng)求頭。

如果想通過(guò)cors中間件設(shè)置Access-Control-Allow-Headers白名單，如圖：

如果設(shè)置白名單的話，這個(gè)響應(yīng)頭在瀏覽器中是不會(huì)出現(xiàn)的，想想也是，設(shè)置了白名單就是為了不讓信息泄密啊。

以上是前端發(fā)送請(qǐng)求設(shè)置自定義請(qǐng)求頭，需要服務(wù)端配合，設(shè)置一個(gè)Access-Control-Allow-Header的響應(yīng)頭就可以了。

cors對(duì)前端獲取響應(yīng)頭的行為也做了限制，默認(rèn)情況下，前端是獲取不到響應(yīng)頭的，這里需要設(shè)置一個(gè)響應(yīng)頭:Access-Control-Expose-Headers,這個(gè)響應(yīng)頭最好不要設(shè)置成通配符樣式，而要設(shè)置成白名單，在cors中間件中這樣設(shè)置：

這樣的話前端就可以通過(guò)xmlhttprequset請(qǐng)求對(duì)象的實(shí)例的getAllResponseHeaders方法得到這個(gè)響應(yīng)頭了。

“如何配置ajax請(qǐng)求跨域攜帶cookie”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站標(biāo)題：如何配置ajax請(qǐng)求跨域攜帶cookie
分享地址：http://aaarwkj.com/article10/gjihgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、做網(wǎng)站、虛擬主機(jī)、網(wǎng)站維護(hù)、外貿(mào)建站、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)