【分享】浅谈 5+App 中的网络请求跨域

分类：HTML5+

跨域请求

从 5+App 诞生开始，ask 社区中类似下面这些问题，总会不定时出现一下：

mui 的 ajax 请求跨域怎么解决？
为什么在浏览器上测试正常，在 5+App 中请求不到数据？

注：此文中的问题、测试、解决方案，均为本地环境。实际的生产环境，不在讨论范围内。所谓本地环境，就是自己开发用的电脑设备。

问题分析

出现上述问题的原因，大概有以下几种：

页面资源和服务，部署在了不同的机器上。
请求的地址主机名用的是 localhost 或者 127.0.0.1。
电脑设备的网络和手机设备的网络不在同一个网段，无法互通。

第一种，这个是“标准”的跨域，网上的解决方案很多。可以服务端配置允许跨域请求，也可以用诸如 jsonp 等前端解决方案。

第二种，这个是本文要探讨的重点，继续往后看。

测试

下面做一个测试，测试在不同设备下使用不同的地址访问服务的结果。

启动服务

为了方便期间直接用 Node.js 作为服务，本机的 IP 为 192.168.11.11，服务的端口为 3000。

app.js 代码如下：

var http = require('http');  

var server = http.createServer(function(req, res) {  
  console.log('有人访问了');  
  res.writeHead(200, {  
    'Content-Type': 'text/plain;charset=utf-8'  
  });  
  if (req.url === '/favicon.ico') {  
    console.log('ignore');  
  } else if (req.url === '/request') {  
    var ret = {  
      code: 200,  
      msg: '请求成功',  
      data: {  
        name: 'request'  
      }  
    };  
    res.end(JSON.stringify(ret));  
  } else {  
    res.end('hello');  
  }  
});  
server.listen(3000);  

console.log('server runing at port:' + 3000);

/*启动服务*/  
$ node app.js

这个截图

PC 浏览器

打开电脑上的浏览器，输入以下几个地址，访问的结果都相同。

http://localhost:3000/request
http://127.0.0.1:3000/request
http://192.168.11.11:3000/request

手机浏览器

在使用手机浏览器访问之前，需要确保手机连接的网络与电脑设备的网络在同一个网段，否则无法访问。

打开手机浏览器，同样输入上面的几个地址，会发现只有 http://192.168.11.11:3000/request 返回了数据结果。通过命令行窗口的日志，也可以看到服务是否被正确访问到。

移动 App

其实这一步可以不用做太多测试了，结果和用手机浏览器访问是一样的。

对于移动 App 而言，应用是运行在手机系统中的，应用资源并不是部署在远程服务器上。当你在应用中用 127.0.0.1 作为主机名发起网络请求时，其实是在手机系统中查找是否有这个资源路径可访问。那么“为什么在浏览器上测试正常，在 5+App 中请求不到数据？”这个问题的原因，就在于此。

再说两句

前面说了这么多，再回到 5+App 上。虽然 5+App 是采用 Web 相关的技术开发移动 App，但是也不是所有 Web 的经验都可以照搬套用。遇到问题，还是要学会多搜索，多实验测试。

扩展阅读

下面这些，可以参考一下。实际开发中，视自己的开发需求选定方案。

0 赞关注分享

0 个评论

要回复文章请先登录或注册