koa(egg)中重定向到获取微信token的url,存在跨域问题,无法解决
问题描述
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论