uni-app wkwebview下彻底解决ajax跨域问题

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app wkwebview下彻底解决ajax跨域问题
尽管官方提供 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 请根据具体情况参照修改。

下载附件：my-xmlhttprequest.js_.zip


Harmonyos Next教程
1 回复

在uni-app中使用wkwebview时，遇到ajax跨域问题，通常可以通过配置CORS（跨源资源共享）或者使用代理服务器来解决。由于直接在客户端（即uni-app应用）修改浏览器安全策略来完全绕过跨域限制是不可行的，因此以下方案主要关注服务器端配置和uni-app项目中的代理设置。

方案一：服务器端配置CORS

CORS允许服务器声明哪些来源可以访问该服务器上的资源。服务器端需要设置适当的HTTP头部来允许跨域请求。以下是一个简单的Node.js Express服务器配置CORS的示例：

const express = require('express');
const cors = require('cors');
const app = express();

const corsOptions = {
  origin: 'http://your-uni-app-domain.com', // 允许访问的源
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', // 允许的HTTP方法
  credentials: true, // 是否允许发送Cookie
};

app.use(cors(corsOptions));

app.get('/api/data', (req, res) => {
  res.json({ msg: 'This is CORS-enabled for a specific origin!' });
});

app.listen(3000, () => {
  console.log('CORS-enabled web server listening on port 3000');
});

方案二：使用uni-app的代理功能

uni-app提供了代理功能，可以在开发阶段通过配置manifest.json来绕过跨域问题。以下是一个配置示例：

{
  "mp-weixin": { // 或者其他平台配置
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://your-backend-server.com", // 后端服务器地址
          "changeOrigin": true, // 是否改变源
          "pathRewrite": { "^/api": "" } // 路径重写规则
        }
      }
    }
  }
}

在uni-app中进行ajax请求时，只需将URL前缀改为/api：

uni.request({
  url: '/api/data', // 代理后的URL
  method: 'GET',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

结论

直接在客户端（如uni-app）中彻底解决ajax跨域问题是不可能的，因为这违反了浏览器的同源策略。正确的做法是在服务器端配置CORS或者使用代理服务器来转发请求。上述方案提供了服务器端配置CORS和使用uni-app代理功能的代码示例，可以根据实际情况选择合适的方法来解决跨域问题。

回到顶部