欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問題

 更新時(shí)間:2022年04月09日 14:27:30   作者:五月閑云一野鶴  
這篇文章主要介紹了Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue設(shè)置反向代理和cookie設(shè)置

項(xiàng)目場景

最近使用Vue開發(fā)一個(gè)新的項(xiàng)目,因?yàn)榉?wù)器還沒到,調(diào)取后端本地接口,因?yàn)檎埱蠼涌诘臅r(shí)候沒有跨域,就沒開反向代理。后面就被一個(gè)很基礎(chǔ)的東西踩了坑,就是 cookie的一些知識,記錄一下,加深一下印象。

問題描述

聯(lián)調(diào)過程中,發(fā)現(xiàn)調(diào)用登錄接口之后,再去調(diào)其他接口,就會(huì)報(bào)登錄狀態(tài)失效,之前做了好久小程序的項(xiàng)目,突然遇到這種有點(diǎn)懵逼。

原因分析

首先,出現(xiàn)這個(gè)問題,問了下后端,后端說是Cookie沒有傳給他。然后我們來確認(rèn)下Cookie的定義和作用是什么?

HTTP 協(xié)議中的 Cookie 它包括 Web Cookie 和瀏覽器 Cookie,它是服務(wù)器發(fā)送到 Web 瀏覽器的一小塊數(shù)據(jù)。服務(wù)器發(fā)送到瀏覽器的 Cookie,瀏覽器會(huì)進(jìn)行存儲,并與下一個(gè)請求一起發(fā)送到服務(wù)器。通常,它用于判斷兩個(gè)請求是否來自于同一個(gè)瀏覽器,例如用戶保持登錄狀態(tài)。

當(dāng)接收到客戶端發(fā)出的 HTTP 請求時(shí),服務(wù)器可以發(fā)送帶有響應(yīng)的 Set-Cookie 標(biāo)頭,Cookie 通常由瀏覽器存儲,然后將 Cookie 與 HTTP 標(biāo)頭一同向服務(wù)器發(fā)出請求。

看到這里,我就去看了下,當(dāng)我調(diào)用登錄接口成功的時(shí)候,后端是返回了Set-Cookie 的,但是發(fā)現(xiàn)瀏覽器沒有去設(shè)置。看到這里,就知道Set-Cookie 瀏覽器沒有生效。Cookie 基于安全方面的考慮,在瀏覽器中無法獲取跨域的 Cookie 。

解決方案

在Vue項(xiàng)目里根目錄vue.config.js設(shè)置一下反向代理

module.exports = {
?devServer: {
? // 設(shè)置代理
? proxy: {
? ?"/api": {
? ? target: "http://127.0.0.1:8081/", // 域名
? ? ws: true, // 是否啟用websockets
? ? changOrigin: true, //開啟代理:在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端,然后發(fā)送請求的數(shù)據(jù),并同時(shí)接收請求的數(shù)據(jù),
? ? ?? ??? ??? ??? ? ? //這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題
? ? pathRequiresRewrite: {
? ? ?"^/api": "/"
? ? }
? ?}
? }
?}
}

請求的時(shí)候

// '/api'等于'http://127.0.0.1:8081/api'
// 此時(shí)請求地址為'http://127.0.0.1:8081/api/picture?method=upload'
get('/api/picture?method=upload')

解決完成!開心。

Vue項(xiàng)目使用js-cookie細(xì)則

背景:最近的vue項(xiàng)目中由于項(xiàng)目的token是需要設(shè)置過期時(shí)間的,當(dāng)然,以前這種過期的行為邏輯一直是后端來控制,但這次要求前端也進(jìn)行token時(shí)間的一個(gè)監(jiān)控,由于懶得封裝cookie,所以就用了js-cookie的一個(gè)cookie封裝庫

什么是js-cookie

看名字我們就知道這是關(guān)于cookie存儲的一個(gè)js的API,根據(jù)官網(wǎng)描述其優(yōu)點(diǎn)有:適用所有瀏覽器、接受任何字符、經(jīng)過任何測試沒什么bug、支持CMD和CommonJS、壓縮之后非常小,僅900個(gè)字節(jié)

在項(xiàng)目中進(jìn)行安裝

npm install js-cookie 'js-cookie' --save

在項(xiàng)目中的入口文件(main.js)全局引入

import Cookies from 'js-cookie'

在項(xiàng)目中使用

1、存cookie  set方法支持的屬性有 :  expires->過期時(shí)間    path->設(shè)置為指定頁面創(chuàng)建cookie   domain-》設(shè)置對指定域名及指定域名的子域名可見  secure->值有false和true ,表示設(shè)置是否只支持https,默認(rèn)是false

Cookies.set('key', 'value'); ?//創(chuàng)建簡單的cookie
Cookies.set('key', 'value', { expires: 27 });//創(chuàng)建有效期為27天的cookie
Cookies.set('key', 'value', { expires: 17, path: '' ?}); //可以通過配置path,為當(dāng)前頁創(chuàng)建有效期7天的cookie

2、取cookie

Cookies.get('key'); // 獲取指定key 對應(yīng)的value
Cookies.get(); //獲取所有value

3、刪除cookie

Cookies.remove('key');//刪除普通的cookie
Cookies.remove('name', { path: '' }); // 刪除存了指定頁面path的cookie

注意:如果存的是對象,如:

userInfo = {age:111,score:90}; ?Cookie.set('userInfo',userInfo)

取出來的userInfo需要進(jìn)行JSON的解析,解析為對象:

let res = JSON.parse( Cookie.get('userInfo') );

當(dāng)然你也可以使用:

Cookie.getJSON('userInfo');

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實(shí)現(xiàn)打印功能的示例代碼

    vue實(shí)現(xiàn)打印功能的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何通過vue實(shí)現(xiàn)打印功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-12-12
  • 基于Vue實(shí)例生命周期(全面解析)

    基于Vue實(shí)例生命周期(全面解析)

    下面小編就為大家?guī)硪黄赩ue實(shí)例生命周期(全面解析)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-08-08
  • vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式

    vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式

    這篇文章主要為大家詳細(xì)介紹了vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開發(fā)環(huán)境代理方案

    Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開發(fā)環(huán)境代理方案

    這篇文章主要為大家介紹了Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開發(fā)環(huán)境代理方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • vue 計(jì)算屬性和偵聽器的使用小結(jié)

    vue 計(jì)算屬性和偵聽器的使用小結(jié)

    這篇文章主要介紹了vue 計(jì)算屬性和偵聽器的使用小結(jié),幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2021-01-01
  • 基于vue實(shí)現(xiàn)分頁組件的示例代碼

    基于vue實(shí)現(xiàn)分頁組件的示例代碼

    分頁組件是一種用戶界面元素,用于在長列表或數(shù)據(jù)集中分割內(nèi)容,分頁組件是每個(gè)開發(fā)人員必須掌握的一個(gè)組件,廣泛應(yīng)用在各個(gè)場所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫出的分頁組件,需要的朋友可以參考下
    2023-08-08
  • vue中深度選擇器圖文詳解

    vue中深度選擇器圖文詳解

    在Vue的開發(fā)中,我們經(jīng)常會(huì)用到外部組件庫,下面這篇文章主要給大家介紹了關(guān)于vue中深度選擇器的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • 在Vue2中注冊全局組件的兩種方法詳解

    在Vue2中注冊全局組件的兩種方法詳解

    這篇文章主要介紹了在Vue2中注冊全局組件的兩種方法,非常的細(xì)致,需要的朋友可以參考下
    2022-07-07
  • 詳解Vue中生命周期鉤子函數(shù)的使用示例

    詳解Vue中生命周期鉤子函數(shù)的使用示例

    這篇文章主要為大家詳細(xì)介紹了Vue中常見的生命周期鉤子函數(shù)的使用,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-11-11
  • 如何手寫簡易的 Vue Router

    如何手寫簡易的 Vue Router

    這篇文章主要介紹了如何手寫簡易的 Vue Router,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-10-10

最新評論