nuxt获取前端cookie

拼搏现实的明天。 2022-05-03 23:48 173阅读 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 条评论，173人围观）

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

相关阅读

相关 Nuxt异步获取

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

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

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

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

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

相关 js 获取cookies

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

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

相关 jsp获取cookie

<% Cookie[] myCookie=request.getCookies(); for(int i = 0; i < myCookie.

￡神魔★判官ぃ/ 2022年08月17日 14:21/ 0 赞/ 1329 阅读

相关前端cookie使用

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

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

相关 nuxt获取前端cookie

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

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

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

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

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

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

function GetCookie() { var key =

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

相关 JS获取cookie

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

小咪咪/ 2021年09月21日 01:58/ 0 赞/ 390 阅读

相关 cookie 前端操作

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

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