luckgo@21cn.com
luckgo@21cn.com
  • 发布:2020-01-22 15:59
  • 更新:2021-05-13 16:41
  • 阅读:9773

wkwebview下彻底解决ajax跨域问题

分类:HTML5+

尽管官方提供plus.net.XMLHttpRequest口口声声说是支持跨域,但实际上本地跨域却不支持,很是扯蛋。

本地跨域是指加载本地file://开头(即file协议)文件,比如用ajax请求本地html或json文件,在ios的uiwebview没问题,但在wkwebview下,即使用plus.net.XMLHttpRequest也不行,这里想到方法是自己写一个XMLHttpRequest,核心是利用plus.io.resolveLocalFileSystemURL来实现。修改一下你的程序启动代码,引入这个自定义的XMLHttpRequest文件,然后在plus初始化相关代码里加入以下代码:

    var oxhr = jQuery.ajaxSettings.xhr;  
    var plusXhr = function() {  
         try {  
            return new plus.net.XMLHttpRequest();  
        } catch ( e ) {}  
    };  

    var myXhr = function() {  
        try {  
            return new MyXmlHttpRequest();  
        } catch ( e ) {}  
    };  

    jQuery.ajaxSettings.xhr = plusXhr; //默认使用plus的XMLHttpRequest  

    var _ajax = $.ajax;  
    $.ajax = function(url, options) {//重写ajax方法  
        var urlx = url;  
        if (typeof url === 'object' && url !== null) {  
            urlx = url.url;  
        }  

        if (urlx.indexOf('http') !== 0) {  
            jQuery.ajaxSettings.xhr = myXhr; //本地文件,file协议或相对路径时使用本地xhr  
        } else {  
           jQuery.ajaxSettings.xhr = plusXhr; //还原成plus自带的  
       }  
        return _ajax(url, options);  
    }

【注】以上是jquery示例,如果是mui、uni-app请根据具体情况参照修改。

附件更新:2020.02.05

2 关注 分享
ancientry liushisheng@outlook.com

要回复文章请先登录注册

33999187@qq.com

33999187@qq.com

回复 2077793591@qq.com :
搞不明白,一脸懵逼,请大神发个demo
2021-05-13 16:41
1759228204@qq.com

1759228204@qq.com

求大佬写个 示例
2021-05-08 18:30
25009291@qq.com

25009291@qq.com

回复 luckgo@21cn.com :
/**
* 5+ ajax
*/
function getAbsoluteUrl(url) {
var a = document.createElement('a');
a.href = url;
return a.href;
}
(function($) {
var originAnchor = document.createElement('a');
originAnchor.href = window.location.href;
$.plusReady(function() {
$.ajaxSettings = $.extend($.ajaxSettings, {
xhr: function(settings) {
if (settings.crossDomain) { //强制使用plus跨域
return new plus.net.XMLHttpRequest();
}
//仅在webview的url为远程文件,且ajax请求的资源不同源下使用plus.net.XMLHttpRequest
if (originAnchor.protocol !== 'file:') {
var urlAnchor = document.createElement('a');
urlAnchor.href = settings.url;
urlAnchor.href = urlAnchor.href;
settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host);
if (settings.crossDomain) {
return new plus.net.XMLHttpRequest();
}
}
if ($.os.ios && window.webkit && window.webkit.messageHandlers) { //wkwebview下同样使用5+ xhr
return new plus.net.XMLHttpRequest();
}
return new window.XMLHttpRequest();
}
});

var oxhr = jQuery.ajaxSettings.xhr;
var plusXhr = function() {
try {
return new plus.net.XMLHttpRequest();
} catch ( e ) {}
};

var myXhr = function() {
try {
return new MyXmlHttpRequest();
} catch ( e ) {}
};
mui.ajaxSettings.xhr = plusXhr; //默认使用plus的XMLHttpRequest
var _ajax = mui.ajax;
mui.ajax = function(url, options) {//重写ajax方法
url = getAbsoluteUrl(url);
var urlx = url;
if (typeof url === 'object' && url !== null) {
urlx = url.url;
}
if (urlx.indexOf('http') !== 0) {
mui.ajaxSettings.xhr = myXhr; //本地文件,file协议或相对路径时使用本地xhr
} else {
mui.ajaxSettings.xhr = plusXhr; //还原成plus自带的
}
return _ajax(url, options);
}
});
})(mui);

已解决非常感谢
2020-11-14 16:46
Medea

Medea

回复 574638778@qq.com :
你好想问下你现在解决了吗
2020-09-14 09:59
luckgo@21cn.com

luckgo@21cn.com (作者)

回复 466211508@qq.com :
用绝对路径
function getAbsoluteUrl(url) {
var a = document.createElement('a');
a.href = url;
return a.href;
}

或者用转换成 _www/pages/login/login.html这样也可以
2020-09-01 17:36
466211508@qq.com

466211508@qq.com

Resolve file URL failed: 不允许读,请问下这个怎么 解决,我是读“pages/login/login.html”
2020-08-31 15:48
321080893@qq.com

321080893@qq.com

普通调试基座跟自定义调试基座运行都有用,打正式包之后就又没用了,输出找到问题 entry.file这个方法并没有执行,这这是为什么?
2020-07-17 09:35
luckgo@21cn.com

luckgo@21cn.com (作者)

回复 zhang1992a127z@163.com :
那应该是你引用的文件路径不对
2020-05-28 15:41
zhang1992a127z@163.com

zhang1992a127z@163.com

大神,这个引用后报Resolve file URL failed: 编码错误,我有点懵逼啊
2020-05-28 15:10
357729157@qq.com

357729157@qq.com

这个问题也困扰了很久,最后是使用 mui.ajax
参数 crossDomain 设置为true,强制跨域 只有 5+app 可用
2020-05-08 17:30