从 quasar ssr 发送 cookie 到 laravel 后端

Question

我正在使用Quasar SSR 为前端和Laravel 为后端构建一个网络应用程序。

对于身份验证，我使用新的 Laravel Sanctum 包，它使用 cookie 进行用户身份验证。

在 SPA 中构建应用程序，我对用户进行身份验证没有问题。不幸的是，在 SSR 模式下，没有 cookie 发送到服务器，因此无法进行用户身份验证。

我使用 axios 来处理 ajax 请求。我将它设置在启动文件中。

有人可以帮我将 cookie 发送到后端吗？

编辑以添加一些精度。我使用 nginx 作为 web 服务器，我的配置如下：

server {
    listen 80;
    listen [::]:80;
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    ssl_certificate /var/www/certs/www.mysite/fullchain.pem;
    ssl_certificate_key /var/www/certs/www.mysite/privkey.pem;
    ssl_protocols TLSv1.2;

    root /var/www/next/mysite/public;
    index index.php index.html index.htm index.nginx-debian.html;

    server_name next.mysite.net;

    location / {
        #try_files $uri $uri/ /index.php?$args;
    proxy_pass    http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location /storage/ {
    }
    location /vendor/ {
    }
    location /server {
        try_files $uri $uri/ /index.php?$args;
    }
    location /prequel-api {
        try_files $uri $uri/ /index.php?$args;
    }
    location /api {
        try_files $uri $uri/ /index.php?$args;
    }
    location /graphql {
        try_files $uri $uri/ /index.php?$args;
    }
    location /sanctum {
        try_files $uri $uri/ /index.php?$args;
    }
    location ~ [^/]\.php(/|$) {
        #try_files $uri =404;
        fastcgi_split_path_info ^(.+?\.php)(/.*)$;
        #if (!-f $document_root$fastcgi_script_name) {
        #   return 404;
        #}

        # Mitigate https://httpoxy.org/ vulnerabilities
        fastcgi_param HTTP_PROXY "";

        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;

        # include the fastcgi_param setting
        include fastcgi_params;

        # SCRIPT_FILENAME parameter is used for PHP FPM determining
        #  the script name. If it is not set in fastcgi_params file,
        # i.e. /etc/nginx/fastcgi_params or in the parent contexts,
        # please comment off following line:
        fastcgi_param  SCRIPT_FILENAME   $document_root$fastcgi_script_name;
    }

    location ~ /\.ht {
        deny all;
    }
}

import Axios from "axios";
import { boot } from "quasar/wrappers";
import { Cookies } from "quasar";
const axios = Axios.create({
 baseUrl: "https://next.mysite.net"
});
axios.defaults.withCredentials = true;
axios.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    return Promise.reject(error.response);
  }
);
export default boot(async ({ Vue, ssrContext }) => {
  if (process.env.SERVER) {
    //Check if cookies are available
    var cookies = JSON.stringify(Cookies.parseSSR(ssrContext).getAll()).replace(
      /[{}]/g,
      ""
    );
    console.log("cookies: ", cookies);
  }

  Vue.prototype.$axios = axios;
});

export { axios };

Answer 1

我通过在创建实例时使用 cookie 扩展 axios 实例解决了类似的问题

//boot/axios.js（内部回调函数）

if (ssrContext) {
    const cookies = ssrContext.$q.cookies.getAll();

    instance.interceptors.request.use(function (config) {
      const cookiesSet = Object.keys(cookies).
        reduce((prev, curr) => prev + curr + '=' + cookies[curr] + ';', '');

      if (cookiesSet.length > 0) {
        config.headers.Cookie = cookiesSet;
      }

      return config;
    });
  }