Vue項目怎么設置反向代理和cookie

這篇文章主要介紹“Vue項目怎么設置反向代理和cookie”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue項目怎么設置反向代理和cookie”文章能幫助大家解決問題。

Vue設置反向代理和cookie設置

項目場景

最近使用Vue開發一個新的項目，因為服務器還沒到，調取后端本地接口，因為請求接口的時候沒有跨域，就沒開反向代理。后面就被一個很基礎的東西踩了坑，就是 cookie的一些知識，記錄一下，加深一下印象。

問題描述

聯調過程中，發現調用登錄接口之后，再去調其他接口，就會報登錄狀態失效，之前做了好久小程序的項目，突然遇到這種有點懵逼。

原因分析

首先，出現這個問題，問了下后端，后端說是Cookie沒有傳給他。然后我們來確認下Cookie的定義和作用是什么？

HTTP 協議中的 Cookie 它包括 Web Cookie 和瀏覽器 Cookie，它是服務器發送到 Web 瀏覽器的一小塊數據。服務器發送到瀏覽器的 Cookie，瀏覽器會進行存儲，并與下一個請求一起發送到服務器。通常，它用于判斷兩個請求是否來自于同一個瀏覽器，例如用戶保持登錄狀態。

當接收到客戶端發出的 HTTP 請求時，服務器可以發送帶有響應的 Set-Cookie 標頭，Cookie 通常由瀏覽器存儲，然后將 Cookie 與 HTTP 標頭一同向服務器發出請求。

看到這里，我就去看了下，當我調用登錄接口成功的時候，后端是返回了Set-Cookie 的，但是發現瀏覽器沒有去設置。看到這里，就知道Set-Cookie 瀏覽器沒有生效。Cookie 基于安全方面的考慮，在瀏覽器中無法獲取跨域的 Cookie 。

解決方案

在Vue項目里根目錄vue.config.js設置一下反向代理

module.exports = {
 devServer: {
  // 設置代理
  proxy: {
   "/api": {
    target: "http://127.0.0.1:8081/", // 域名
    ws: true, // 是否啟用websockets
    changOrigin: true, //開啟代理：在本地會創建一個虛擬服務端，然后發送請求的數據，并同時接收請求的數據，
                       //這樣服務端和服務端進行數據的交互就不會有跨域問題
    pathRequiresRewrite: {
     "^/api": "/"
    }
   }
  }
 }
}

請求的時候

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

解決完成！開心。

Vue項目使用js-cookie細則

背景：最近的vue項目中由于項目的token是需要設置過期時間的，當然，以前這種過期的行為邏輯一直是后端來控制，但這次要求前端也進行token時間的一個監控，由于懶得封裝cookie，所以就用了js-cookie的一個cookie封裝庫

什么是js-cookie

看名字我們就知道這是關于cookie存儲的一個js的API，根據官網描述其優點有：適用所有瀏覽器、接受任何字符、經過任何測試沒什么bug、支持CMD和CommonJS、壓縮之后非常小，僅900個字節

在項目中進行安裝

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

在項目中的入口文件（main.js）全局引入

import Cookies from 'js-cookie'

在項目中使用

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

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

2、取cookie

Cookies.get('key'); // 獲取指定key 對應的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需要進行JSON的解析,解析為對象：

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

當然你也可以使用：

Cookie.getJSON('userInfo');

關于“Vue項目怎么設置反向代理和cookie”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。