移动端html5的跨域问题

Posted 2021-03-29 前端Ali

关于移动端html5的跨域问题

https://blog.csdn.net/zhaoxy_thu/article/details/17640183

本文对跨域问题进行说明，同时列出了移动端跨域问题的解决方案。

什么是跨域？

域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。有一种简明的说法来解释广域跨域：跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。

在广域网环境中，由于浏览器的安全限制，网络连接的跨域访问时不被允许的，XmlHttpRequest也不例外。但有时候跨域访问资源是必需的。

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。同源策略不阻止将动态脚本元素插入文档中。

由此我们可以知道，浏览器中不允许跨域访问，但是脚本元素是可以跨域访问的。

怎么算跨域？

这些都是跨域http://www.a.com/a.jshttps://www.a.com/b.js 同一域名，不同协议 不允许通信
http://www.a.com/a.jshttp://70.32.92.74/b.js 域名和域名对应ip 不允许通信
http://www.a.com/a.jshttps://www.a.com/b.js 同一域名，不同协议 不允许通信
http://www.a.com/a.jshttp://a.com/b.js 同一域名，不同二级域名（同上） 不允许通信（cookie这种情况下也不允许访问）

跨域如何解决？

在这里我们主要探讨在移动端上的跨域问题，主要有以下两种解决办法：

 

1.JSONP

关于JSONP在这里不做过多说明，其原理主要就是通过前面所说的脚本元素来绕过浏览器的跨域限制，大家想了解的可以看看这篇文章《说说JSON和JSONP》。

 

2.框架设置

在这里需要说明一个问题，其实在移动端的WebView并不存在跨域问题，因为WebView是通过file://协议来加载html文件的，而file://协议各个浏览器的实现标准不一样，有些浏览器如移动端的WebView、IE并没有限制对file协议的跨域访问。

 

但是我们在android上使用PhoneGap+jQuery Mobile的时候仍然不能直接进行跨域访问，这是为什么呢？这其实是因为基于安全的考虑，PhoneGap和jQuery本身对跨域访问进行了限制，我们需要对它们进行一些配置。

 

在PhoneGap上，需要在项目的Configure文件中加入<access origin="*"/>，或者把*替换为所要访问的域名，这就允许了对该域名进行跨域访问。在jQuery上，我们需要在mobileInit函数中加上以下两行代码来允许跨域访问：

但是当我们需要在pc上对html5代码进行调试时应该怎么办呢？在这里以Chrome为例，可以关闭浏览器的跨域限制。在终端中通过以下命令启动Chrome浏览器即可：

 

Windows:
chrome.exe --disable-web-security

MacOS:
/usr/bin/open -a "/Applications/Google Chrome.app" --args --disable-web-security