谷歌浏览器新版本Chrome 80跨域登录状态失效的问题
跨域携带cookie
https://blog.csdn.net/qq_44703805/article/details/108832433
http://www.ruanyifeng.com/blog/2016/04/cors.html
如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号 设置为 * 会报下面的错误
Access to XMLHttpRequest at 'https://unified.report.kugou.com/v1/get_report_user_detail?appid=1058&clientver=1000&clienttime=1618477169999&mid=c9525f39c528b9f2b198e5b5c331b2c6&uuid=c9525f39c528b9f2b198e5b5c331b2c6&dfid=3LjsSg09s3VM3XYSDF0mXQS3&clienttoken=-&page=1&pagesize=10&start_time=2020-04-01+00:00:00&end_time=2021-05-01+00:00:00&approve_source=1' from origin 'https://test.kugou.com' 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'.` The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
项目实操过程中遇到的跨域问题
1.后端人员的设置字段不应该是 * or *.kugou.net 应该是所有匹配但是不能用`通配符`
eg:Access-Control-Allow-Origin:ngx.var.http_origin //后端人员根据我的域名进行返回
2.前端需要设置好相应的xhr请求的相应字段,api.js里面
const service = axios.create({
withCredentials: true // 该字段的更改
})
function request (params) {
// return new Promise(resolve => {
// KGRequest(params).then((res) => {
// resolve(res);
// }).catch((err) => {
// resolve(err);
// })
// })
//修改成如下的方式
return new Promise((resolve)=>{
service(params).then((res)=>{
resolve(res);
}).catch((err)=>{
resolve(err);
})
})
}
3.由于是跨域,浏览器也需要进行相应的设置
https://www.cnblogs.com/hexiaobao/p/12604065.html
4.请求到后需要进行状态码的判断
errcode,表示异常登录的状态码 判断是否是对应的 20011 20012 20013 然后才可以相对应的去做出处理
const errcode = idx(res,_ => _.data.errcode);
if (errcode === 20011 || errcode === 20012) {
window.location.href = "https://test-permission.kugou.com/login_page?back=" + window.location.href
} else {
const data = idx(res,_ => _.data.data.data_list);
// console.log(data)
data.map(item => {
item.key = item.report_kugouid;
})
this.setState({
data: data
})
}