跨域问题

在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 设置禁用同源跨域校验

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

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