koa(egg)中重定向到获取微信token的url,存在跨域问题,无法解决

发布于 2022-09-07 20:55:39 字数 2790 浏览 24 评论 0

问题描述

Failed to load https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxaf4b4a767b7ecdf9&redirect_uri=myurl&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect: Redirect from 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxaf4b4a767b7ecdfc&redirect_uri=myurl&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect' to 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxaf4b4a767b7ecdfc&redirect_uri=myurl&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

问题出现的环境背景及自己尝试过哪些方法

1如果采用前后端不分离的方式,用渲染模板的方法,可以正常获取 ctx.render('index.nj',xxx)
2题主采用的是前后端分离模式,nginx做的反代理,访问的页面为cdn上的.html(此处跨域设置全部正常放行)
后台的路由中如果是一般url,均可正常跳转,、例

路由1() {
    ctx.redirect('/路由2')
   }
  

可是为了获取微信的openid,必须要做以下跳转
this.ctx.unsafeRedirect('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+AppID+'&redirect_uri='+return_uri+'&response_type=code&scope='+scope+'&state=STATE#wechat_redirect');拿到code
此时出现跨域报错,拜读https://harttle.land/2016/12/...(重定向 CORS 跨域请求)得到答案:多次重定向中,任一环节出现跨域失败,则整个流程完全跨域失败。

尝试解决办法

1 js设置安全域名和业务域名设置从myurl.cn设置为myurl.cn/index.html不被允许
2 在redirect前添加头部(病急乱投医),仍无效
    // 允许来自所有域名请求
    this.ctx.set("Access-Control-Allow-Origin", "*");
    // 这样就能只允许 http://localhost:8080 这个域名的请求了
    // ctx.set("Access-Control-Allow-Origin", "http://localhost:8080"); 
    // 设置所允许的HTTP请求方法
    this.ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");
    // 字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段.
    this.ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type");
    // 服务器收到请求以后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。
    // Content-Type表示具体请求中的媒体类型信息
    this.ctx.set("Content-Type", "application/json;charset=utf-8");
    // 该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。
    // 当设置成允许请求携带cookie时,需要保证"Access-Control-Allow-Origin"是服务器有的域名,而不能是"*";
    this.ctx.set("Access-Control-Allow-Credentials", true);

相关代码

this.ctx.unsafeRedirect('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+AppID+'&redirect_uri='+return_uri+'&response_type=code&scope='+scope+'&state=STATE#wechat_redirect');

你期待的结果是什么?实际看到的错误信息又是什么?

请教大家是否有接触过类型跨域问题。请大牛帮助!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文