跨域那点破事

本文最后更新于:4 days ago

事故&解决方法

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

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

1
2
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发了一个请求,但是由于同源的限制,这个请求会直接被阻止。基于默认你的浏览器就是不安全的同源策略难免会错杀合理的请求。毕竟坏人虽有,但大多数人还是好人。所以也就需要放行合理的请求。这样一来,跨域就诞生了。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!