我所遇到的跨域问题

谷歌浏览器新版本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
    })
}

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值