前端页面使用axios请求后端接口,提示还未登陆。但是后端接口使用postman验证确实是可行的

这篇具有很好参考价值的文章主要介绍了前端页面使用axios请求后端接口,提示还未登陆。但是后端接口使用postman验证确实是可行的。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述:

后端接口是有做对用户登陆状态的校验,使用postman进行测试,该接口功能可能,可以满足业务需求,但是前端使用axios请求时会提示用户还没有登陆,实际上,已经存储了session。

接口返回:

前端页面使用axios请求后端接口,提示还未登陆。但是后端接口使用postman验证确实是可行的,前端

本地:

前端页面使用axios请求后端接口,提示还未登陆。但是后端接口使用postman验证确实是可行的,前端

通过调试代码,基本可以确认是session的问题,前端和postman发起的请求是存在差异的,前端页面的session并没有传到后端,在一番仔细查找的,终于发现了问题:

前端页面使用axios请求后端接口,提示还未登陆。但是后端接口使用postman验证确实是可行的,前端

有个感叹号,点击后的内容是:

此Set-Cookie标头未指定’SameSite"届性,它默认为’SameSite=Lax,"并被阻止,因为它来自跨站点响应,而不是对顶级导航的响应。必须为此SetCookie设置"SameSite=None“才能实现跨站点使用

原来是因为我前端页面的端口是8080,后端是8083,存在跨域问题,所以虽然在 Response Header 里看到了set-cookie的操作,但是在浏览器的 application里看到,并没有被设置进来。

原因:谷歌浏览器80以后版本的内核限制了set-cookie的操作,需要在请求头中,为SetCookie设置"SameSite=None“

解决方法:

1.如果是本地开发,并不想做其他额外的操作,可以选择更换浏览器(搜狗浏览器、360浏览器)

2.使用https加密,SetCookie设置"SameSite=None“

3.添加拦截器,在请求头中加入 SameSite=None文章来源地址https://www.toymoban.com/news/detail-854536.html

到了这里,关于前端页面使用axios请求后端接口,提示还未登陆。但是后端接口使用postman验证确实是可行的的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在 VUE 项目中,使用 Axios 请求数据时,提示跨域,该怎么解决?

    在 VUE 项目开发时,遇到个问题,正常设置使用 Axios 库请求数据时,报错提示跨域问题。 那在生产坏境下,该去怎么解决呢? 其可以通过以下几种方式去尝试解决: 例如,如果您的源地址是 http://localhost:8080 ,则可以设置如下响应头: 在上面代码中,使用 Express.js 创建简单

    2024年04月17日
    浏览(35)
  • ElementUI之登陆+注册->饿了吗完成用户登录界面搭建,axios之get请求,axios之post请求,跨域,注册界面

     饿了吗完成用户注册登录界面搭建 axios之get请求 axios之post请求 跨域 注册界面 1.饿了吗完成用户注册登录界面搭建 将端口号8080改为8081 导入依赖,在项目根目录使用命令npm install element-ui -S,添加Element-UI模块 -g:将依赖下载node_glodal全局依赖 -d(依赖放在static/[]package.json的

    2024年02月04日
    浏览(41)
  • Axios基本使用,为学习后续的Vue服务【发送请求+并发请求+前端拦截器】

    目录 1、项目中引入Axios 2、使用Axios发送请求 2.1、例:发送GET请求 2.2、例:发送POST请求 3、axios并发请求 4、拦截器 注:个人学习笔记,因自己学过后端,所以有关后端的代码,我在这里就不展示了~ 不了解后端的宝子,也不会耽误学习,因为公司里会有写好的接口文档,直

    2024年02月02日
    浏览(40)
  • selenium处理登陆爬虫(维持登陆状态请求页面)

    selenium在处理需要登陆的时候,需要修改浏览器请求头参数cookie或token,在请求需要登陆的页面时,添加参数,跳过登陆,直接获取登陆后的内容。 处理思路 浏览器先登陆,请求同一个域名下的网页,抓包,提取浏览器内的cookie字符串,如: 标红的字符串直接复制,并解析为

    2024年02月12日
    浏览(26)
  • 【前端版】分布式医疗云平台【解决面包屑的问题、定义路由、服务端接口、动态渲染菜单、登陆测试、字典类型管理 】(二十)

    目录 2.3.解决其它问题 2.3.1.面包屑的问题及控制台报错 3.登陆和加载菜单和后台关联问题 

    2024年02月12日
    浏览(38)
  • vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法

    axios封装-我常用的请求头参数  application/json; charset=utf-8 页面登录请求-post 网络请求正常传入参数 后端代码,查看控制台发现都为null,没取到值。 1.尝试将前端post请求改成get,其他都不用变 发现正常取到值,打印输出正常。前端页面正常跳转。 2.后端设置为post请求,前端a

    2024年02月02日
    浏览(36)
  • 前端登陆页面

    以下是一个简单的前端登陆页面的代码示例: 该页面包含一个简单的表单,用户需要输入用户名和密码才能登录。表单包括用户名输入框、密码输入框和一个登录按钮。当用户点击登录按钮时,表单将被提交到服务器进行验证。 同时,我们还引用了一个CSS文件,该文件可以

    2024年02月11日
    浏览(35)
  • axios添加缓存请求,防止多次请求,单页面多个同一组件造成多次请求解决方案

    在 vue 开发中,我们偶尔会遇到相同组件多次调用一个请求的问题,即使添加了缓存,但在第一次调用时也会出现这类问题,这种问题的根源往往是由于第一个组件发起的请求没有返回数据,第二个组件没有在缓存中获取到数据而重新发起请求。 解决这种问题我们往往可以分

    2024年02月07日
    浏览(33)
  • 【前端知识】Axios——请求拦截器模板

    Axios是一个基于Promise的HTTP客户端,用于发送HTTP请求。它可以在浏览器和Node.js环境中使用,并且提供了许多强大的功能,例如拦截请求和响应、转换请求和响应数据、取消请求等。 Axios具有简单易用的API,可以轻松地发送GET、POST、PUT、DELETE等各种类型的请求。它还支持异步操

    2024年02月09日
    浏览(34)
  • 前端开发中的ajax请求、axios封装

    目录 浏览器http请求 同步 js标签跨域、url 异步ajax、websock协议 ajax是异步的技术术语,最早的api是xhr(XMLHttpRequest) fetch es6 api axios 封装axios(无论用requst还是axios请求都会生效) src/utils/request.ts请求/响应拦截器封装 ts post请求request.post(url)和 通用请求request({url,method:\\\'post\\\'})对象

    2024年02月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包