关于nuxt服务端渲染 axios跨域请求每次sessionid都不一样的处理方式

最新推荐文章于 2024-04-04 19:53:02 发布
原创 最新推荐文章于 2024-04-04 19:53:02 发布 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在使用Nuxt进行服务端渲染时，如何通过设置axios的withCredentials属性及提供接口的服务器配置cors来确保每次跨域请求的sessionID保持一致，避免因sessionID变化导致的请求失败问题。

关于nuxt服务端渲染 axios跨域请求每次sessionid都不一样的处理方式：

  1. axios设置withCredentials为true.
  2. 提供接口的服务器需设置跨域
    corsConfiguration.addAllowedOrigin("");
    corsConfiguration.addAllowedHeader("    ");
    corsConfiguration.addAllowedMethod("*");
    corsConfiguration.setMaxAge(3600l); //这里是3600，只是因为本程序这里需要long类型参数所以加了一个L
    corsConfiguration.setAllowCredentials (true);
  3. 关于withCredentials的解释：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials
  4. 这里要感谢昆虫大侠的一片文章：https://my.oschina.net/alyouge/blog/1930452?from=singlemessage
nuxt3 + ts + vue3 + axios + vant + element-plus + sass + pinia vue3服务端渲染，从构建到部署，兼容pc+移动端
局外人LZ的博客
04-02 3358
简介：该教程兼容pc+移动端，如只需一端，可忽律兼容教程部分，根据需要运行的客户端构建项目。
【新手向】Nginx+pm2部署和发布Nuxt项目 实现服务端渲染
"✧treasure mountain✧"
05-26 7718
Nuxt项目完成了 剩下的就是部署到服务器上了 但是网上的教程多半含混不清 顺序混乱 对新手不太友好 索性自己写一个比较全的教程吧 介绍 Nuxt项目打包后发布在服务器上是前台运行的 启动后 若将窗口关掉则无法访问 使用pm2可以完美解决该问题 pm2是一个带有负载均衡功能的Node应用的进程守护工具 允许独立代码利用全部服务器上的所有CPU 并且能够保证进程永远活着(alive) pm2有着0秒的重载 还能提供监控等功能 是个很实用的工具 环境准备 一、首先当然是安装Node了 安装pm2需要npm 包括
解决vue项目axios每次请求session不一致的问题
01-18
1、vue开发后台管理项目，登录后，请求数据每次session都不一致，后台返回未登录，处理方法打开main.js设置： // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' require('es6-promise')
解决Nuxt使用axios跨域问题
01-19
Nuxt 是 Vue 项目服务器端渲染（SSR)解决方案。而在使用时，就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。 解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题，需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。 用 yarn 安装： yarn add axios @nuxtjs/axios @nuxtjs/proxy 使用 npm 安装： npm install axios @nuxtjs/axios @nuxtjs/proxy 注意：不需要手动注
nuxt框架中路由鉴权之Koa和Session的用法
08-27
后台管理页面需要有登录系统，所以考虑做一下路由鉴权，这篇文章主要介绍了nuxt框架中路由鉴权之Koa和Session的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
彻底解决axios跨域,axios每次请求session都在不停变化的问题
代码尊的博客
11-27 3601
彻底解决: - axios跨域请求 - axios每次请求session都在不停变化
vue axios sessionID 每次请求都不同的解决方式
qq_56333219的博客
04-04 936
配置 allowedOrigins 时，如果写的是http://localhost/，而请求的源地址是 127.0.0.1。虽然它们通常指向同一台本地计算机，但在 CORS 规则中被视为不同的源。需更新更新 allowedOrigins 列表，将现有条目http://localhost:5174 替换为 http://127.0.0.1:5174。
基于axios 解决跨域cookie丢失的问题
10-17
在上面的示例代码中，`axios.defaults.withCredentials = true` 是用来开启全局配置，使得所有的axios请求都将携带cookies。然后，我们创建了一个URLSearchParams对象，添加了参数，并发起POST请求到'...
优化: 1, 这个socket服务只是整体业务中的一部分, 其他部分包括api接口, nuxt服务端渲染, handlebars服务端模板渲染, 都有各自的一套路由, 请给这些业务规划出清晰不易混淆的路由设计, 各自业务可能需要session和登录态同步, 进行数据交互
最新发布
11-05
为了整合多个业务模块（WebSocket服务、API接口、Nuxt服务端渲染、Handlebars服务端模板渲染）并确保路由清晰且支持会话和登录态同步，我们需要设计一个统一的路由架构。以下是一个建议的路由规划： 1. **路由前缀...
Spring-Boot + Spring-Security + Vue 跨域问题
Ravenq的专栏
05-19 5450
原文： http://www.aqcoder.com/post/content?id=40 最近的一个小项目使用了 Spring-Boot + Vue 的前后端分离小项目，项目虽小，也五脏俱全，有自己的用户系统，因此就有了权鉴问题。 Java 领域里有两个权鉴框架比较出名 Shiro 和 Spring Security。这里我们使用了 Spring Security。 必须要了解的概念 CSR...
Vue使用axios引起的后台session不同操作
11-20
新项目前端用的Vue全家桶，使用axios代替ajax请求后台接口，在调整注册接口的时候，发现在session里取不到验证码，排查后才知道获取验证码和注册两个请求的session不同，sessionId不一样。 现在调整一下Vue的配置，修改main.js文件，添加如下两行代码 import axios from ‘axios’ axios.defaults.withCredentials=true; 修改后 import Vue from 'vue' import App from './App' import router from './router' import Element
跨域每次请求sesseionid不同_解决Springboot+ajax跨域及每次请求sessionId不一样的问题...
weixin_39564368的博客
01-17 837
1、问题复现：项目中后端使用Springboot搭建，使用Shiro做安全管理。前后端分离后，前端使用ajax访问服务端程序。在未做任何处理前，ajax报错：Access to XMLHttpRequest at 'http://127.0.0.1:8080/login/checkLogin' from origin'http://localhost:63342' has been blocked...
sessionId在每次request请求时变化的问题处理
热门推荐
daimondaimon的专栏
12-30 1万+
前言 众所周知，http协义的请求都是无状态的，所以服务端要记录用户的状态时，就需要用某种机制来识别具体的用户。而这个机制就是Session，Session是服务端保存的一个数据结构，用于跟踪用户状态的。我们一般用于存储用户的登录信息，也用其生成SessionId，存放在cookies上 问题 我们在开发过程中，因需要验证登录时使用的验证码，会在服务端生成一个SessionId与当时请求得到的验证码，放到redis上，再把SessionId返回存放到客户端上，作为该用户的一个凭证。...
Chrome浏览器同一窗口每次请求sessionId不同问题的一种解决办法分享
weixin_40571937的博客
09-28 5214
问题描述 最近在调试一些浏览器请求页面的时候，在其他浏览器都正常，唯独只有谷歌chrome浏览器不行！ 情况1：问题的最直接现象就是每次请求在后台过滤器里通过request.getSession().getId()，拿到的id都是不同的，导致后面出现一些不正常的结果。 情况2：或者在 Shiro的权限控制中，通过session设置token信息，在授权的时候想要通过SecurityUtils.getSubject().getSession()获取session后，通过session.getAttribut
NUXT使用axios解决跨域问题
奋斗的新丁
07-28 492
安装 npm install @nuxtjs/axios @nuxtjs/proxy --save nuxt.config.js modules: [ '@nuxtjs/axios','@nuxtjs/proxy' ], axios: { proxy: true, // 表示开启代理 prefix: '/', // 表示给请求url加个前缀 /api credentials: true // 表示跨域请求时是否需要使用凭证 }, prox
解决axios跨域问题，解决跨域请求sessionId不一致问题
一条吃软饭的软狗
08-14 1万+
axios.post跨域请求出错 ①axios设置标题和转换请求数据 var HTTP = axios.create({ baseURL:'http://localhost:8080/', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, transformRequest:...
解决axios跨域访问导致的session ID不一致问题
qq_51508932的博客
01-23 1281
记录贴。
跨域造成 sessionId不一致
joefany的博客
01-31 5773
最近开发一个web项目时因前后端分离，同事在本地开发h5页面，我这边后台开发时发现有跨域问题，所以，很常规的用cors过滤器给header加头信息，允许跨域请求，但却出现了另一个问题，每次请求的sessionid都不一样，于是开始定位问题，把前端的代码放在服务器上，避免跨域，发现每次请求的sessionid一样了。 总结：跨域时，服务器不会保存该请求的session信息，只会保存同域名下的ses
nuxt3 服务端渲染首次不请求
06-16
Nuxt.js 3.x 是一个基于 Vue.js 的开源框架，它支持服务端渲染（SSR）和客户端渲染（CSR）。Nuxt 3.0 中引入了一些新的特性和改进，其中关于首次不请求（即“预渲染”或“Prerendering”）的一个重要功能是“Server-Tail-Requests”（服务器尾部请求）。 当Nuxt 3 使用 SSR 并配置了预渲染时，可以在用户首次访问应用时，将完整的 HTML 页面预先生成并发送给客户端，而不是像传统的 SSR 那样，先发送初始的空 HTML，然后在客户端动态加载内容。这样做的好处是可以提高页面的加载速度，因为用户在浏览器接收到的页面已经是完整的，不需要等待 JavaScript 运行和内容的异步加载。 为了实现首次不请求，你需要做以下设置： 1. 在 `nuxt.config.ts` 或 `.js` 文件中启用 `prerender: true` 选项，并配置预渲染路由。 2. 对于需要预渲染的页面，使用 `<nuxt:ssr>` 或 `<nuxt-error>` 组件，或者在 `pages` 目录下的组件中添加 `export { asyncData }` 方法。 3. 如果你想预渲染特定的动态路由，可以使用 `generate` API。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值