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

最新推荐文章于 2023-04-26 11:42:15 发布
最新推荐文章于 2023-04-26 11:42:15 发布
阅读量1.8k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue-nuxt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/NightStar_yong/article/details/82768117
本文介绍了在使用Nuxt进行服务端渲染时，如何通过设置axios的withCredentials属性及提供接口的服务器配置cors来确保每次跨域请求的sessionID保持一致，避免因sessionID变化导致的请求失败问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于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
跨域每次请求sesseionid不同_解决Springboot+ajax跨域及每次请求sessionId不一样的问题...
weixin_39564368的博客
01-17 802
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...
axios库读不到cookie_Vue axios 跨域请求无法带上cookie的解决
weixin_39811036的博客
12-19 1308
Vue axios 跨域请求无法带上cookie的解决在main.js设置// 携带cookieaxios.defaults.withCredentials = true补充知识：VUE axios请求跨域时没有带上cookie或者每次cookie都改变这两天用VUE写管理后端时，碰到一个奇葩问题：我本地使用dev配置开发的时候 请求可以带上cookie信息 打包出来部署在服务器上 请求就没带上...
解决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')
彻底解决axios跨域,axios每次请求session都在不停变化的问题
代码尊的博客
11-27 3520
彻底解决: - axios跨域请求 - axios每次请求session都在不停变化
NUXT使用axios解决跨域问题
奋斗的新丁
07-28 475
安装 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 解决跨域cookie丢失的问题
10-17
在上面的示例代码中，`axios.defaults.withCredentials = true` 是用来开启全局配置，使得所有的axios请求都将携带cookies。然后，我们创建了一个URLSearchParams对象，添加了参数，并发起POST请求到'...
nuxt3 + ts + vue3 + axios + vant + element-plus + sass + pinia vue3服务端渲染，从构建到部署，兼容pc+移动端
局外人LZ的博客
04-02 3221
简介：该教程兼容pc+移动端，如只需一端，可忽律兼容教程部分，根据需要运行的客户端构建项目。
【新手向】Nginx+pm2部署和发布Nuxt项目 实现服务端渲染
"✧treasure mountain✧"
05-26 7680
Nuxt项目完成了 剩下的就是部署到服务器上了 但是网上的教程多半含混不清 顺序混乱 对新手不太友好 索性自己写一个比较全的教程吧 介绍 Nuxt项目打包后发布在服务器上是前台运行的 启动后 若将窗口关掉则无法访问 使用pm2可以完美解决该问题 pm2是一个带有负载均衡功能的Node应用的进程守护工具 允许独立代码利用全部服务器上的所有CPU 并且能够保证进程永远活着(alive) pm2有着0秒的重载 还能提供监控等功能 是个很实用的工具 环境准备 一、首先当然是安装Node了 安装pm2需要npm 包括
Spring-Boot + Spring-Security + Vue 跨域问题
Ravenq的专栏
05-19 5398
原文： http://www.aqcoder.com/post/content?id=40 最近的一个小项目使用了 Spring-Boot + Vue 的前后端分离小项目，项目虽小，也五脏俱全，有自己的用户系统，因此就有了权鉴问题。 Java 领域里有两个权鉴框架比较出名 Shiro 和 Spring Security。这里我们使用了 Spring Security。 必须要了解的概念 CSR...
解决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 注意：不需要手动注
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
跨域造成 sessionId不一致
joefany的博客
01-31 5755
最近开发一个web项目时因前后端分离，同事在本地开发h5页面，我这边后台开发时发现有跨域问题，所以，很常规的用cors过滤器给header加头信息，允许跨域请求，但却出现了另一个问题，每次请求的sessionid都不一样，于是开始定位问题，把前端的代码放在服务器上，避免跨域，发现每次请求的sessionid一样了。 总结：跨域时，服务器不会保存该请求的session信息，只会保存同域名下的ses
刷新下页面SessionID 为何变了呢？
zanhai的专栏
05-28 4690
最新一个前后端分离的项目，出现了一个奇怪的现象。 通过API接口实现前后端分离的项目，请求session ID 刷新就会改变，造成不断生成新的SESSION文件 1、$.ajax解决方案： 设置： xhrFields: { withCredentials: true } $.ajax({ url:api+'user/islogin', xhrFields: { withCredentials: true }, data:postdata, ......
Vue中跨域以及sessionId不一致问题解决方法
热门推荐
北海之灵的博客
10-23 1万+
在使用Vue和SpringBoot做前后端分离项目时，会出现以下问题： 前端直接请求数据会出现跨域访问限制的问题。 如果登录时还需要图片验证码验证，首先需要请求获取验证码的接口，然后将验证码存入session中并返回给前端，登录时拿用户输入的验证码和session中保存的验证码比较，这时会发现session中获取不到之前存入的验证码，这是sessionId改变导致的。 1.后台数据请求部分处理...
解决Vant组件库tabs标签页选中状态与当前页面不匹配
qq_52161116的博客
04-26 1446
通过vue-router的$route.path获取到当前页面的路由路径，然后将路径与组件进行双向数据绑定,同时将的name属性也设置为动态的页面路径。
nuxt中使用vant几个样式问题汇总
baidu_41601048的博客
06-21 819
1 关于van-tabs： 这是
nuxt3 服务端渲染首次不请求
最新发布
06-16
Nuxt 3.0 中引入了一些新的特性和改进，其中关于首次不请求（即“预渲染”或“Prerendering”）的一个重要功能是“Server-Tail-Requests”（服务器尾部请求）。 当Nuxt 3 使用 SSR 并配置了预渲染时，可以在用户...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值