l***@21cn.com
l***@21cn.com
  • 发布:2020-01-22 15:59
  • 更新:2022-07-13 19:05
  • 阅读:17093

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 l***@outlook.com

要回复文章请先登录注册

bwj2022

bwj2022

回复 3***@qq.com :
现在还可以用吗
2022-05-26 08:12
bwj2022

bwj2022

回复 3***@qq.com :
解决了没,教我一下啊,重谢
2022-05-13 14:07
3***@qq.com

3***@qq.com

回复 2***@qq.com :
搞不明白,一脸懵逼,请大神发个demo
2021-05-13 16:41
浅浅的活埋我

浅浅的活埋我

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

2***@qq.com

回复 l***@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

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

l***@21cn.com (作者)

回复 4***@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
4***@qq.com

4***@qq.com

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

3***@qq.com

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

l***@21cn.com (作者)

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