跨域那点破事

事故&解决方法

某日调试Canvas组件时，需要调用存在文件桶里的文件来对组件进行测试。却不料遇到了一个新的问题——跨域。

由于需要调用的文件存于文件桶内，所以想要调用，也就需要在NGINX上加点代码。

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

其中Origin代表所允许的域名，既可以放行那些域名。这里可以用*来代表全部，也可以具体到某个或者某几个域名。需要注意的是，写域名的时候必须要加上http://或者https://以此来告知服务器要放行何种协议。

解决方法说完了，接下来要说说为啥有跨域这个问题。

跨域是咋回事

要问为啥不能跨域，就不得不提到一种令人头疼的攻击——跨站攻击脚本。攻击者通过诱骗的方式将一段JS脚本发送到你的浏览器中。继而又因为JS脚本可以运行在任意一个网页上，攻击者就可以获得你正在浏览的其他的网页的信息（比如你的支付宝cookie）。而且整个过程都是在你不知情的情况下完成的。
想要解决这个问题最简单的方法就是禁止在浏览器中运行JS脚本，简单粗暴立竿见影。但这显然是不现实的。
所以接下来，开发者想出来了一个巧妙的策略——同源。在URL协议中，协议和域名组成了“源”（这也就是为什么需要填写http://或者https://）。而同源就限制了这些JS脚本。张三通过abc.xyz让你下载了一个JS脚本，想要黑你的支付宝。给api.alipay.com发了一个请求，但是由于同源的限制，这个请求会直接被阻止。基于默认你的浏览器就是不安全的同源策略难免会错杀合理的请求。毕竟坏人虽有，但大多数人还是好人。所以也就需要放行合理的请求。这样一来，跨域就诞生了。