[初级前端工程师]网络相关知识

##menter’s question

代理

为什么使用代理？

• 改善安全性，提高性能，节省费用

1. 儿童过滤器
   集中式访问代理控制
2. 安全防火墙 在单一安全节点限制哪些应用层协议的数据可以流入组织
3. web缓存
   代理缓存维护常用文档副本，按需提供，减少缓慢而昂贵的因特网通信
4. 反向代理
   假扮web服务器，接手发送给web服务器的真实请求。 代理可以发起与其他服务器的通信，按需定位所请求的内容。
5. 内容路由器
   根据网络流量状况以及内容类型将请求导向到特定的web服务器
6. 转码器

• 如何使客户端流量流向代理？

1. 手动将客户端配置为使用代理服务器
   预先配置浏览器 浏览器厂商或者发行商会在将浏览器发送给其客户之前预先对浏览器（或者其他客户端）的代理设置进行手工配置
   代理的自动配置 提供一个URI 指向一个用JS语言编写的代理自动配置文件，客户端会取回这个js文件，并运行它以决定是否应该使用一个代理，如果是的话，应该使用哪个代理服务器。
2. 修改网络
   在客户端不知道或者没有参与的情况下，拦截网络流量并将其导入代理，这种称为拦截代理；依赖于监视HTTP流量的交换设备及路由设备
3. 修改DNS的命名空间
   代理服务器会假扮Web服务器的名字和IP地址，这种所有的请求就会发送给代理服务器而不是服务器了；
   要实现这一点，可以手动编辑DNS名称列表，或者用特殊的动态DNS服务器根据需要来确定适当的代理或服务器。在安装过程中，真实服务器的IP地址和名称被修改了，替代物得到的会是之前的地址和名称；
4. 修改Web服务器
   为Web服务器配置为向客户端发送一条HTTP重定向命令（code响应码 305）将客户端请求重定向导一个代理上去。收到重定向命令后，客户端会与代理进行通信
   

DNS解析

客户端代理配置

• PAC文件
  PAC文件是一些小型的JavaScript程序，在运行过程中计算代理，是一种更动态的代理配置解决方案。访问每个文档时，Javascript函数都会选择恰当的代理服务器。

function FindProxyForURL(url, host) {
  if(url.substring(0,5) == 'http:') return 'PROXY http-proxy.mydomain.com:8090';
  if(url.substring(0,4) == 'ftp') return 'PROXY ftp-proxy.mydomain.com:8090';
 else return 'DIRECT';
}

实践部分

nginx

nginx（proxy，rewriter，try_file）,nginx常用配置

return,rewrite ,try_files 区别

通用NGINX重写的两个指令是return和rewrite，try_files指令是将请求定向到应用程序服务器的便捷方式。

• return
  return指令在两个通用指令中更简单，因此我们建议在可能的情况下使用它而不是* rewrite
  将返回包含在指定要重写的URL的服务器或位置上下文中，并定义客户端在将来对资源的请求中使用的rewrite URL。
  在指定需要重写URLS的server，location的上下文中包含return， 为了让资源在之后的请求中使用，它定义了客户端更正后（rewrite）的URL

server {
   listen 80;
   listen 443 ssl;
   server_name www.old-name.com;
   return 301 $scheme://www.new-name.com$request_uri;
}

return指令告诉NGINX停止处理请求并立即发送code301（move permanently）
指定的客户端重写URL。 重写的URL使用两个NGINX变量来捕获和复制原始请求URL中的值

charles

Charles代理规则的优先级是从上到下的，也就是说上面的规则会覆盖下面的规则，这点需要注意；

tools

1. Map Remote Tool
   远程映射工具（Map Remote Tool）根据配置的映射更改请求位置，以便从新位置透明地提供响应，就好像原始请求一样。
   通过此映射，可以从另一个站点提供全部或部分站点资源。 我们可以将xk72.com/charles/映射到localhost/charlesdev/，另一个站点的子目录服务，或者使用xk72.com/*的映射为来自另一个站点的给定后缀的所有文件提供服务。 php到localhost/charlesdev/。
2. 映射类型
   我们可以将目录映射到目录，例如xk72.com/charles/到localhost / charlesdev /
   可以将文件映射到文件，例如xk72.com/charles/download.php到abc.com/testing/test.html
   可以将带有文件模式的目录映射到目录，例如xk72.com/charles/*.php到localhost / charlesdev /
   如果未在目标映射中指定路径，charles不会更改URL的路径部分。 如果要映射到根目录，在目标路径字段中放置一个/。
3. 本地映射工具（Map Local Tool）
   Map Local使我们可以使用本地文件，就像它们是远程网站的一部分一样。 我们可以在本地开发文件并像测试它们一样进行测试。 本地文件的内容将返回给客户端，就像它是正常的远程响应一样。
   如果我们不得不将文件上传到网站以测试结果，Map Local可以大大加快开发和测试速度。 使用Map Local，可以在开发环境中安全地进行测试。
4. 动态文件
   动态文件（例如包含服务器端脚本的文件）不会由Map Local执行，因此如果文件中有任何脚本，脚本将按原样返回到浏览器 - 可能不是预期的结果。
   如果想要使用动态文件，就好像它们是远程网站的一部分一样，请参阅Map Remote工具。
   [Map remote]https://www.charlesproxy.com/documentation/tools/map-remote/
5. 本地映射工具执行过程
   当请求与Map Local匹配时，它会检查与路径匹配的本地文件。 它不包括查询字符串。 如果在本地找到所请求的文件，则将其作为响应返回，就好像它是从远程站点加载的一样，因此它对客户端是透明的。 如果在本地找不到所请求的文件，则该网站将照常提供请求。
6. 位置匹配
   每个位置匹配可以包含与特定URL匹配的协议，主机，端口和路径模式。 地点可能包括通配符。 向此工具添加新位置时，可能会找到有关创建位置匹配的更多帮助。

menter’s question

1. 代理在前端开发的应用
   解决跨域访问api问题；

2. 代理在前端部署时的应用

3.平常常用代理手段的实践与配置
见前面charles nginx配置语法

nginx charles webpack_dev_server 对比

nginx
charles 比较耗资源，代理的时候电脑转的飞起