我要评论当用户登录时，服务器会在用户的浏览器上设置一个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内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论