我是用的是uniapp的renderjs,经测试,是在guide.js中发现使用jsonp请求//cf.aliyun.com/nvc/nvcPrepare.jsonp触发了script的onerror,onerror回调参数为:
"isTrusted": true,
"NONE": 0,
"CAPTURING_PHASE": 1,
"AT_TARGET": 2,
"BUBBLING_PHASE": 3,
"type": error,
"target": [object HTMLScriptElement],
"currentTarget": [object HTMLScriptElement],
"eventPhase": 2,
"bubbles": false,
"cancelable": false,
"defaultPrevented": false,
"composed": false,
"timeStamp": 607.3999999789521,
"srcElement": [object HTMLScriptElement],
"returnValue": true,
"cancelBubble": false,
"path": [object HTMLScriptElement],
[object HTMLHeadElement],
[object HTMLHtmlElement],
[object HTMLDocument],
[object Window],
"composedPath": function composedPath() {
[native code]
},
"stopPropagation": function stopPropagation() {
[native code]
},
"stopImmediatePropagation": function stopImmediatePropagation() {
[native code]
},
"preventDefault": function _() {
window.__needNotifyNative__ && "touchmove" == this.type && (window.__needNotifyNative__ = t.execSync(e.webview.currentWebview(), "needTouchEvent", [])), l.oldPreventDefault.call(this)
},
"initEvent": function initEvent() {
[native code]
},
}
。renderjs 代码:
export default {
mounted() {
this.init();
},
methods: {
init() {
if (window.NVC_Opt) {
if (!NVC_Result.nvcPreRes) {
this.init_NVC_Opt();
this.createScript('static/smartCaptcha/guide.js');
}
} else {
this.createScript('static/smartCaptcha/flexible.js').then(() => {
this.createScript('static/smartCaptcha/al_smartCaptcha.js').then(() => {
this.createScript('static/smartCaptcha/al_quizCaptcha.js').then(() => {
this.init_NVC_Opt();
this.createScript('static/smartCaptcha/guide.js');
})
})
})
}
},
createScript(src) {
return new Promise(res => {
let script = document.createElement('script')
script.src = src;
script.onload = () => {
res();
};
document.head.appendChild(script)
})
},
init_NVC_Opt() {
window.NVC_Opt = {
// 无痕配置 && 滑动验证、刮刮卡、问答验证码通用配置
appkey: "FFFF0N000000000084BA",
scene: "ic_message_h5",
isH5: false,
popUp: false,
renderTo: "#captcha",
nvcCallback: function(data) {
// data为getNVCVal()的值,此函数为二次验证滑动或者刮刮卡通过后的回调函数
// data跟业务请求一起上传,由后端请求AnalyzeNvc接口,接口会返回100或者900
},
language: "cn",
// 滑动验证长度配置
customWidth: 300,
// 刮刮卡配置项
width: 300,
height: 100,
elements: [
"//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png",
"//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png",
],
bg_back_prepared: "//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png",
bg_front: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC",
obj_ok: "//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png",
bg_back_pass: "//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png",
obj_error: "//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png",
bg_back_fail: "//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png",
upLang: {
cn: {
_ggk_guide: "请在屏幕上滑动,刮出两面盾牌",
_ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
_ggk_loading: "加载中",
_ggk_fail: [
"呀,盾牌不见了<br/>请",
"javascript:NoCaptcha.reset()",
"再来一次",
"或",
"http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN",
"反馈问题",
],
_ggk_action_timeout: [
"我等得太久啦<br/>请",
"javascript:NoCaptcha.reset()",
"再来一次",
"或",
"http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN",
"反馈问题",
],
_ggk_net_err: [
"网络实在不给力<br/>请",
"javascript:NoCaptcha.reset()",
"再来一次",
"或",
"http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN",
"反馈问题",
],
_ggk_too_fast: [
"您刮得太快啦<br/>请",
"javascript:NoCaptcha.reset()",
"再来一次",
"或",
"http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN",
"反馈问题",
],
},
},
}
},
// 生成 智能验证控件
createSmartCaptcha() {
console.log('window.nvc', window.nvc);
var ic = new window.smartCaptcha({
// 声明智能验证需要渲染的目标元素ID。
renderTo: "#sc",
// 智能验证组件的宽度。
width: 300,
// 智能验证组件的高度。
height: 42,
// 智能验证组件初始状态文案。
default_txt: "点击按钮开始智能验证",
// 智能验证组件验证通过状态文案。
success_txt: "验证成功",
// 智能验证组件验证失败(拦截)状态文案。
fail_txt: "验证失败,请在此点击按钮刷新",
// 智能验证组件验证中状态文案。
scaning_txt: "智能检测中",
// 前端智能验证通过时会触发该回调参数。您可以在该回调参数中将请求标识(token)、会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。
success: (data) => {
// 调用 service 层的方法
// ownerInstance.callMethod('smartCaptchaSuceess', {
// token: NVC_Opt.token,
// sessionId: data.sessionId,
// sig: data.sig,
// })
},
});
ic.init();
},
}
}
</script>
现在挺懵逼的,不知道怎么做,有什么思路都请务必我说说,谢谢!
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
遇到这个问题,通常意味着你的JSONP请求遇到了错误,导致脚本标签的onerror事件被触发。JSONP是一种跨域数据请求的方式,通过动态插入<script>标签来绕过同源策略限制。当请求失败或返回的内容不是预期的JavaScript函数调用时,就会出现这样的错误。
针对你的情况,这里有几个可能的原因和解决建议:
服务器问题:首先确认阿里云的URL(//cf.aliyun.com/nvc/nvcPrepare.jsonp)是否可以正常访问,以及返回的内容格式是否正确。你可以直接在浏览器中尝试访问这个链接,看是否能获取到一个有效的JavaScript函数调用。
JSONP回调命名:确保你的JSONP请求中指定的回调函数名与服务器期望的一致。通常,JSONP服务允许你通过查询参数指定回调函数名。检查你的请求URL是否正确传递了这个参数。
CORS设置:虽然JSONP是为了规避CORS限制,但某些现代浏览器的安全策略可能会对JSONP产生影响。确认服务器端是否设置了正确的CORS头信息,尽管这不应该直接影响JSONP,但在某些特定情况下可能会影响加载行为。
网络环境问题:检查当前的网络环境是否有阻止该请求的因素,比如企业内网、防火墙或者安全软件等。
脚本执行错误:如果服务器返回了内容,但是内容本身有误(例如语法错误),也会导致onerror触发。确保返回的脚本是可执行的,并且符合JSONP的标准格式。
使用fetch或axios替代:考虑到JSONP的局限性和安全性问题,如果可能的话,推荐使用更现代的跨域请求方式,如fetch API或axios库,并在后端配置CORS以支持这些请求。这样可以得到更好的错误处理和控制。
对于具体的代码调试,你可以在onerror事件处理器中添加更多日志输出,比如打印出详细的错误信息或响应内容,以便进一步定位问题所在。同时,也可以考虑使用开发者工具的网络面板监控这个请求的具体情况,包括状态码、响应头和响应体等。