axios前端访问后端携带cookie的代码实例
更新时间：2024年09月29日 08:37:06 作者：冼紫菜
当用户在网站登录后,服务器会在其浏览器上设置一个包含登录信息的Cookie,通过这个Cookie,服务器能够识别用户是否已登录,文中通过代码介绍的非常详细,需要的朋友可以参考下
当用户登录时，服务器会在用户的浏览器上设置一个Cookie，该Cookie包含了用户的登录信息（如用户名和ID）。这样，当用户浏览网站时，服务器可以检查这个Cookie是否存在，以此来确定用户是否已登录。用户登录后将记录设置cookie，后面的每次访问都将携带cookie作为凭证。
在axios配置文件中，添加下面的代码
import axios from 'axios';
const myAxios = axios.create({
baseURL: 'http://localhost:8080/api',
withCredentials: true
})
myAxios.defaults.withCredentials=true; // 向后台发送请求时携带凭证
export default myAxios;
设置之后，在其他组件饮用myAxios向后端发送请求就能够携带cookie了。
跨域问题解决
前端设置携带凭证之后，后端需要设置允许跨域和携带凭证信息，这里以Java的springboot配置为例
@Configuration
public class WebConfig implements WebMvcConfigurer {
/**
* 跨域配置
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000") // 允许本机端口3000来源
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的请求方法
.maxAge(3600) // 预检请求的有效期
.allowCredentials(true); // 允许携带凭证
}
}
这样，前端向服务器发送请求就携带上cookie了
总结
到此这篇关于axios前端访问后端携带cookie的文章就介绍到这了,更多相关axios前端访问后端带cookie内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue2项目中全局封装axios问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue中v-mode详解以及具体的使用示例,在组件中使用 v-model 时,需要定义model选项,指定绑定的prop和事件,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-03-03
Vue项目本地没有问题但部署到服务器上提示错误(问题解决方案)
一个 VUE 的项目在本地部署没有问题，但是部署到服务器上的时候提示访问资源的错误，遇到这样的问题如何解决呢？下面小编给大家带来了Vue项目本地没有问题但部署到服务器上提示错误的解决方法，感兴趣的朋友一起看看吧2023-05-05
这篇文章主要介绍了Vue实现input宽度随文字长度自适应操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
在浏览网页时我们有些时候需要记住一些用户选择的信息,比如登陆时我们如果选择了记住密码,那么我们下次进入该网页时就会有你上次的登陆信息,下面这篇文章主要给大家介绍了关于vuex存储数据的几种方法,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了websocket在vue2中的封装使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
这篇文章主要介绍了在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了vue通过数据过滤实现表格合并，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了vue数据push后不能响应式更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue 换肤方案验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论