前两天发了一篇快速搭建VUE + EXPRESS + MONGODB环境的文章:
快速搭建基于VUE + EXPRESS + MONGODB架构系统
后续留了两个问题,这几天在网上找了一下,做一个记录。

JS模块化

这个问题在网上找到几篇文章,基本上解决了我的疑惑,在这里转载一下:
JavaScript 模块演化简史
JavaScript模块化演化史
ES6 Module
有兴趣的同学可以去看一下。

跨域

关于这个问题,找过一些资料,但是没有特别符合自己思路的。我的思路如下:

什么是跨域

这个问题的答案很容易找到:跨域,即跨站HTTP请求(Cross-site HTTP request),指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求。而这里的域和域之间的相同和不同是指:域名,协议,端口之中任意的一项不同。或者说域名,协议,端口全部相同的是相同的域,称之为同源策略。这个策略是当前浏览器安全策略的基本策略之一。

1. 为什么浏览器要限制跨域

回答这个问题,首先要来看一下,什么场景下会产生跨域的情况。
当前web系统的基本结构如下:
在这里插入图片描述
我们在浏览器上输入网址的时候,比如http://www.XXXX.com:port/action?key=1&param=2 的时候,浏览器会根据这个URL向服务器请求数据,服务器收到请求后,会根据请求返回一些数据到客户端。问题就发生在这些数据中。当前web系统在前端展示的内容基本上由 HTML/CSS/JS/多媒体资源(JPG/GIF/AVI/MP3等)组成。
其中,JS文件一般来说是一段脚本,用于客户端与服务器的数据交互和信息交换(当前这个过程是相当的频繁)。关键的点来了,假设这个网站是银行的网站,你肯定是要在界面上输入账号和密码的,而这些数据也是通过js脚本之类的东西来上传。正常情况下,你是和银行的后台服务器程序在通信,数据是安全的。但是,如果银行的系统遭受到共计了,或者黑客在银行的网站上放了一个恶意链接,链接到攻击者自己的网站上,那么你在不小心点击了这个恶意链接之后,你的账号密码就有可能直接发送到了这个链接上。你关键信息就会被盗走了。
当然,这是一个简化了的场景

  1. 第一,银行没那么容易被黑。
  2. 第二,上传的数据可以采用各种加密技术等等。

但是防止网络攻击的基本原则就是在各个阶段增加技术手段,提高攻击者的难度。
浏览器一直在做的假设是,任何时候只要用户开始使用互联网应用,这个应用就开始尝试攻击这个用户,也就是说互联网应用是默认不可信的,浏览器在它们可能做的任何事情上都加了限制,而且也对互联网应用开发者提供有限的关于这些限制的报错信息。因此这是一个对程序非常不友善的环境,除非这个程序是一个很简单的不访问任何互联网数据的程序。当然这是另外一个话题了,我们暂时只关注跨域这个问题本身。
在这个假设下,浏览器认为同源情况下的服务是可以信赖的(恶意了解都是会将客户端的请求发送到非同源地址进行访问)。因此,浏览器需要做限制跨域的基本安全策略。

2. 为什么需要跨域?

上一点提到,跨域是很危险的。那么我们为什么又要解决跨域的这个问题呢?
下面讲下自己的理解:

单一服务端

从CGI时代开始,没有专门的前端这一说,在客户端浏览器上展示的基本上都是由服务器端拼成并返回的的HTML/CSS/JS文件,浏览器下载到本地后进行解析/渲染/展示等。
将前面那个图再细化一点点看:
在这里插入图片描述
或者再各个类型的服务器前面加负载均衡、反向代理等七七八八的一堆技术。但是总的说来,客户端与服务器端是单一入口的,所有的请求都会往一个后台接口发送,这个接口我们就可以理解为一个单一的域,所以不会跨域,一旦跨域,就是其他的不信任链接了。
当然,架构下有一些连接外部资源等场景,但我认为这个不是关键性的场景。

前后端分离

在客户端的操作原来越复杂,业务越来越多的情况下,特别是H5出来之后,很多系统的架构就往前后台分离的模式转变:
在这里插入图片描述
前端做业务支撑,后台做数据的保存和持久化。在这种模式下,客户端的浏览器最起码要向两个地址(域)发送请求,不可避免的就会需要跨域。

3. 跨域的一般解决方法

这个度娘一搜一大把,就不一一列举了,一般来说选一种合适的就行了。
刚找到一份比较全的:
跨域解决方案
大家可以参考。

Logo

前往低代码交流专区

更多推荐