nuxt获取前端cookie

拼搏现实的明天。 2022-05-03 23:48 238阅读 0赞

使用nuxt框架做http请求，每次要把cookie传到后端，使用document.cookies不能在后端获取cookies，使用cookie-universal-nuxt插件

[https://www.npmjs.com/package/cookie-universal-nuxt][https_www.npmjs.com_package_cookie-universal-nuxt]

安装：

npm i --save cookie-universal-nuxt

在nuxt.config.js中使用

{
      modules: [
        // Simple usage
        'cookie-universal-nuxt',
     
        // With options
        ['cookie-universal-nuxt', { alias: 'cookiz' }],
     ]
    }

使用@nuxtjs/proxy和@nuxtjs/axios插件下的axios请求时在头部带上cookie

只需添加config.headers.Authorization = app.$cookies.get('token')

plugins/axios.js:

import qs from "qs";
    
    export default function ({ $axios, app }) {
      // console.log(app.$cookies.get('token'))  //每次请求获取cooie
      $axios.onRequest(config => {
        //获取cookie放在头部传到后端
        config.headers.Authorization = app.$cookies.get('token')
        config.data = qs.stringify(config.data, {
          allowDots: true //Option allowDots can be used to enable dot notation
        });
        return config;
      });
    
      $axios.onResponse(response => {
        return Promise.resolve(response.data);
      });
    
      $axios.onError(error => {
        return Promise.reject(error);
      });
    }

[https_www.npmjs.com_package_cookie-universal-nuxt]: https://www.npmjs.com/package/cookie-universal-nuxt

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关 Nuxt异步获取

     Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在渲染组件之前异步...

阳光穿透心脏的1/2处/ 2024年04月17日 06:14/ 0 赞/ 71 阅读

相关微前端-qiankun：nuxt2 接入 nuxt2

一、背景主应用：nuxt2、webpack 子应用：nuxt2、webpack 二、代码-配置主应用 2.1、安装 > yarn add qiankun 2.2、

悠悠/ 2024年03月25日 21:45/ 0 赞/ 69 阅读

相关前端获取后端定义Cookie的参数|前端获取URL?后参数的值

//获取cookie中的参数 function getCookiesPbyName(s) { var strcookie =

「爱情、让人受尽委屈。」/ 2023年10月06日 10:17/ 0 赞/ 25 阅读

相关前端理解cookie

cookie的产生 Web应用程序是使用HTTP协议传输数据的，HTTP协议是无状态协议，指协议对于交互没有记忆能力，浏览器与服务器的每一次交互都是新的。为了使WE

╰半夏微凉°/ 2023年06月25日 03:30/ 0 赞/ 26 阅读

相关 js 获取cookies

function getCookie(c_name) { if (document.cookie.length>0) {

向右看齐/ 2022年08月26日 14:27/ 0 赞/ 199 阅读

相关前端cookie使用

cookie 是存储于用户的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。可以使用 JavaScript或者jQuery 来创建和读取c

た入场券/ 2022年05月25日 22:44/ 0 赞/ 222 阅读

相关 nuxt获取前端cookie

使用nuxt框架做http请求，每次要把cookie传到后端，使用document.cookies不能在后端获取cookies，使用cookie-universal-nuxt插

拼搏现实的明天。/ 2022年05月03日 23:48/ 0 赞/ 239 阅读

相关 NUXT获取接口数据（跨域）

首先已经在项目中引入了axios，并将其封装了 import axios from 'axios' import { getUser} from "@/uti

我就是我/ 2022年03月16日 02:54/ 0 赞/ 738 阅读

相关前端获取后台保存的Cookie

function GetCookie() { var key =

桃扇骨/ 2022年02月04日 07:27/ 0 赞/ 724 阅读

相关 cookie 前端操作

数据持久化操作将数据长久保持在客户端，实现网站长久登录效果 cookie 可以认为是记录简单内容的文本文件

喜欢ヅ旅行/ 2021年07月24日 22:06/ 0 赞/ 425 阅读