axios解决跨域和二次访问sessio丢失问题

axios解决跨域和二次访问sessio丢失问题

  • 前后端分离,使用axios访问后端springboot-shiro,第一次登陆成功之后,再次访问session丢失导致已登陆的用户不存在
问题决解
  • 第一步现在前端添加如下代码
axios.defaults.withCredentials = true;

在这里插入图片描述
在这里插入图片描述

  • 第二步,在后端添加过滤器

在这里插入图片描述

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("FilterConfig init");
    }


    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response1 = (HttpServletResponse) response;
        HttpServletRequest request1 = (HttpServletRequest) request;

        response1.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");
        response1.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, If-Modified-Since, x-token");
        response1.setHeader("Access-Control-Allow-Methods", "*");
        response1.setHeader("Access-Control-Max-Age", "3600");
        response1.addHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}
  • "Access-Control-Allow-Origin", "http://localhost:8081"
    这个属性一定要注意,很多说可以使用*来代替,但是最好还是写死,就写后台服务器的地址
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你使用axios进行跨域请求时,返回的数据为空,可能是因为浏览器的安全机制禁止了跨域请求,导致无法获取数据。此时可以通过设置服务器端的跨域访问控制来解决问题。 在服务器端,需要设置允许跨域访问的头信息,例如设置Access-Control-Allow-Origin为允许的域名,可以在响应头中添加如下信息: ``` Access-Control-Allow-Origin: http://example.com Access-Control-Allow-Credentials: true Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization ``` 其中Access-Control-Allow-Origin表示允许跨域请求的域名,如果允许所有域名访问可以设置为*;Access-Control-Allow-Credentials表示是否允许携带cookie等凭证信息;Access-Control-Allow-Methods表示允许的请求方法;Access-Control-Allow-Headers表示允许的请求头信息。 在axios中,可以设置withCredentials为true来允许携带cookie等凭证信息,例如: ```javascript axios.get('http://api.example.com/data', { withCredentials: true }).then(response => { console.log(response.data) }).catch(error => { console.log(error) }) ``` 在这个例子中,我们通过axios发送了一个GET请求,设置了withCredentials为true,允许携带cookie等凭证信息。当服务器返回响应时,我们可以通过response.data获取响应数据。 注意:如果你的服务器返回的响应头中没有设置Access-Control-Allow-Credentials为true,即使你在axios中设置了withCredentials为true,也无法携带cookie等凭证信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值