fetch 跨域 SpringBoot credentials mode is include setAllowCredentials

本文探讨了使用Fetch API时遇到的跨域携带Cookie问题,详细解释了credentials模式为'include'时,后端必须配置CORS允许凭证。提供了两种解决方案:一是移除请求中的credentials配置,二是后端设置CORS允许凭证。

credentials mode is 'include'是请求带cookie

function fetchFn(){
  let myHeaders = new Headers({
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'text/plain',
        'Cache-Control': 'max-age=10',
    });
    fetch('http://localhost/getData',{
        credentials: 'include',
        // headers: myHeaders,
        mode:"cors",
        // mode:"no-cors",
    }).then(function(response){
        return response.text()
        // response.json().then(res=>console.log(res))
        // response.body.then(res=>{console.log(res.text())})
    }).then(res=>console.log(res))
}

当请求带cookie但是,后端没有配置corsConfiguration.setAllowCredentials(true);就会报这个错。
Access to fetch at 'http://10.10.113.186:30333/meta/system/getFriendsLink?systemName=dsd' from origin 'http://127.0.0.1:53746' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. fetch.html:1 Uncaught (in promise) TypeError: Failed to fetch
解决办法,两种方法,

  1. 去掉请求配置credentials: 'include'
  2. 添加响应配置corsConfiguration.setAllowCredentials(true);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值