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

項(xiàng)目場(chǎng)景

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

問(wèn)題描述

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

原因分析

首先，出現(xiàn)這個(gè)問(wèn)題，問(wèn)了下后端，后端說(shuō)是Cookie沒(méi)有傳給他。然后我們來(lái)確認(rèn)下Cookie的定義和作用是什么？

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

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

看到這里，我就去看了下，當(dāng)我調(diào)用登錄接口成功的時(shí)候，后端是返回了Set-Cookie 的，但是發(fā)現(xiàn)瀏覽器沒(méi)有去設(shè)置?？吹竭@里，就知道Set-Cookie 瀏覽器沒(méi)有生效。Cookie 基于安全方面的考慮，在瀏覽器中無(wú)法獲取跨域的 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, //開(kāi)啟代理：在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，
? ? ?? ??? ??? ??? ? ? //這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題
? ? pathRequiresRewrite: {
? ? ?"^/api": "/"
? ? }
? ?}
? }
?}
}

請(qǐng)求的時(shí)候

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

解決完成！開(kāi)心。

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

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

什么是js-cookie

看名字我們就知道這是關(guān)于cookie存儲(chǔ)的一個(gè)js的API，根據(jù)官網(wǎng)描述其優(yōu)點(diǎn)有：適用所有瀏覽器、接受任何字符、經(jīng)過(guò)任何測(cè)試沒(méi)什么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->過(guò)期時(shí)間    path->設(shè)置為指定頁(yè)面創(chuàng)建cookie   domain-》設(shè)置對(duì)指定域名及指定域名的子域名可見(jiàn)  secure->值有false和true ,表示設(shè)置是否只支持https,默認(rèn)是false

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

2、取cookie

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

3、刪除cookie

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

注意：如果存的是對(duì)象，如：

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

取出來(lái)的userInfo需要進(jìn)行JSON的解析,解析為對(duì)象：

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

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

Cookie.getJSON('userInfo');

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

最新評(píng)論