axios跨域请求之credentials

问题描述:
在使用Spring Security时,实现前后端分离出现跨域问题,在Controller添加了跨域注解@CrossOrigin,但是登录成功后没有权限访问想要的接口,在没有前后端分离的情况下是可以正常访问,后来查阅资料发现默认情况下,标准的跨域请求是不会发送cookie等用户认证凭据的。所以服务器就默认你是没有登录的,不具备访问权限的。

解决办法:
1、前段请求 设置:
在axios请求是设置参数:

 axios({
         method:'get',
         url:`${this.content_path}/authority/getauth`,
         withCredentials:true//*设置这个参数,让跨域请求携带cookie,因为cookie中包含了登录的信息
       })

2、后端同样要做设置。

//表示允许跨域请求
    @Bean
    public WebMvcConfigurer WebMvcConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                .allowedHeaders("*")
                .allowCredentials(true);//表示允许请求携带cookie
            }
        };
    }

如果还未解决,可参考下一个

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值