跨域问题

在H5项目开发过程中经常会遇到跨域问题,我们知道跨域问题的产生是浏览器为了数据安全,只允许页面访问同源服务器或被允许跨域的非同源服务器。

什么是同源?

同源有三个要素,三要素都相同的情况下才叫同源。

这三要素分别是:协议(http/https)、域名(www.baidu.com)、端口(8080)

比如:https://www.baidu.com/http://www.baidu.com/ 协议不一样,所以是不同源的。

解决跨域问题

解决跨域问题有很多种方式,比如服务器设置客户端源允许跨域,比如通过统一的服务器中台转发,比如通过<image/>标签下载资源,或者用代理工具处理等等。

今天要说的是另一种,在开发中非常实用的方式。

设置浏览器允许跨域访问

不管是Chrome还是Safari,都有非安全模式,非安全模式可以禁用跨域限制。也就是说,浏览器不做跨域校验,让你正常发送跨域请求。

为什么需要设置 禁用跨域校验

一般来说,发布到产线的项目是用专用公网域名,且该域名是经过服务器允许访问的域名,也就是说,服务器设置了这些公网域名的允许跨域请求。

但是我们在开发过程中,一般是本地域名“localhost”,或者是测试环境域名,这些域名就不会出现在服务器的允许范围内。当然服务器要允许访问也不是不可以,但是就没有安全性了。

Chrome 打开非安全模式浏览器

Chrome是使用非安全模式浏览器的形式禁用跨域校验。

打开非安全模式的Chrome,需要在命令行里运行如下命令:

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=Users/maomao/Documents/MyChromeDevUserData

注意:这里的maomao修改成你自己的电脑用户名。

iOS Safari 设置禁用同源跨域校验

“开发”菜单栏里,有一个停用跨源限制

勾选是打开,即不校验跨域请求;
不勾选会校验跨域请求;
默认不勾选;