前端开发中起到的反向代理（）的作用与作用

前端开发者，为什么需要知道？原因其实很简单。前端和后端已经分开。因此，前端开发者必须了解并能够配置后端，从程序打包部署、路由跳转、加载等方面完成整个开发流程。所以总结一下开发过程中的一些理解。

在应用程序中的作用

它是一个高性能的 HTTP 和反向代理服务器，也是一个通用的 TCP/UDP 代理服务器，最初由俄罗斯 Igor 编写。

它现在几乎是许多大型网站所需的技术。大多数情况下，我们不需要自己去配置它，但是需要了解它在应用中的作用以及如何解决这些问题。

下面我将从企业中的实际应用来解释应用中的作用。

为了便于理解，首先我们了解一些基础知识，它是一个高性能的反向代理服务器。那么什么是反向代理呢？

正向代理和反向代理

代理是服务器和客户端之间的一个假设的服务器层，代理将接收客户端的请求并将其转发给服务器，然后将服务器的响应转发给客户端。

无论是正向代理还是反向代理，都实现了以上功能。

转发代理

转发代理，意思是客户端和原服务器之间的一个服务器（向原始服务器请求并将获取的内容返回给客户端。

正向代理是给我们的，也就是给客户端的。客户端可以根据转发代理访问自己无法访问的服务器资源。

正向代理对我们是透明的，对服务器是不透明的，即服务器不知道是从代理接收访问还是从真正的客户端接收访问。

反向代理

反向代理()方法是指代理服务器接受互联网上的连接请求，然后将请求转发给内部网络上的服务器，将从服务器得到的结果返回给请求连接的客户端。此时，代理服务器对外充当反向代理服务器。

反向代理服务于服务器端。反向代理可以帮助服务器接收客户端的请求，帮助服务器做请求转发、负载均衡等。

反向代理对服务器透明，对我们不透明，即我们不知道我们在访问代理服务器，而服务器知道反向代理正在为他服务。图片描述

生产示例：

user nginx nginx;worker_processes  1;#daemon off;#error_log  logs/error.log;#error_log  logs/error.log  notice;error_log  logs/error.log  info;#pid        logs/nginx.pid;events {    worker_connections  65535;    multi_accept on;}http {    fastcgi_connect_timeout 1200;    fastcgi_send_timeout 1200;    fastcgi_read_timeout 1200;    fastcgi_buffer_size 64k;    fastcgi_buffers 4 64k;    fastcgi_busy_buffers_size 128k;    fastcgi_temp_file_write_size 256k;    client_max_body_size 20M;    #add_header Access-Control-Allow-Origin *;    #add_header Access-Control-Allow-Headers X-Requested-With;    #add_header Access-Control-Allow-Methods GET,POST,OPTIONS;    include       mime.types;    default_type  application/octet-stream;    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '    #                  '$status $body_bytes_sent "$http_referer" '    #                  '"$http_user_agent" "$http_x_forwarded_for"';    #access_log  logs/access.log;    sendfile        on;    #tcp_nopush     on;    #keepalive_timeout  0;    keepalive_timeout  65;    gzip on;    gzip_min_length 1k;    gzip_buffers 4 16k;    #gzip_http_version 1.0;    gzip_comp_level 8;    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif     image/png;    gzip_vary on;    gzip_disable "MSIE [1-6]\.";	server {        listen   80;        server_name  192.168.0.55;        charset utf-8;        root /usr/local/nginx/html;        #access_log  logs/host.access.log  main;        location /{            index  index.html index.htm;            if ( $request_uri = "/" ) {                rewrite "/" http://192.168.0.55/trade/index break;            }            alias   /usr/local/nginx/html/trade;        }        location /power {            try_files $uri $uri/ /power/index.html;            index  index.html index.htm;            root  /usr/local/nginx/html;            proxy_set_header X-real-ip           $remote_addr;            proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;        }        location /trade {            try_files $uri $uri/ /trade/index.html;            index  index.html index.htm;            root  /usr/local/nginx/html;            proxy_set_header X-real-ip           $remote_addr;            proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;        }        location /trade/login {            try_files $uri $uri/ /trade/index.html;            index  index.html index.htm;            root  /usr/local/nginx/html;            proxy_set_header X-real-ip           $remote_addr;            proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;        }        location /auth {            try_files $uri $uri/ /auth/index.html;            index  index.html index.htm;            root  /usr/local/nginx/html;            proxy_set_header X-real-ip           $remote_addr;            proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;        }        location /api/ {            add_header Access-Control-Allow-Origin *;            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Accept";            proxy_set_header X-real-ip           $remote_addr;            proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;            # /api            proxy_pass http://192.168.0.55:3002/;            proxy_connect_timeout 300s;            proxy_send_timeout 300s;            proxy_read_timeout 300s;        }        location /file {            alias file;        }        location /ws/ {            # /ws            proxy_pass http://192.168.0.55:3002;            proxy_http_version 1.1;            proxy_set_header X-real-ip           $remote_addr;            proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;            proxy_set_header Upgrade websocket;            proxy_set_header Connection "Upgrade";            proxy_connect_timeout       1200;            proxy_send_timeout          1200;            proxy_read_timeout          1200;            send_timeout                1200;        }        #error_page  404              /404.html;        # redirect server error pages to the static page /50x.html        #    }	    # include /etc/nginx/dev-conf/*.conf;}

基本配置配置结构

以下是配置文件的基本结构：

events { }http {    server    {         location path        {            ...        }        location path        {            ...        }     }    server    {        ...    }}

内置变量

下面是一些在配置中常用的内置全局变量，你可以在配置的任何地方使用它们。

请求信息Host中的变量名函数$host，如果请求中没有Host行，则等于设置的服务器名$请求类型，如GET,POST $ IP地址$args参数在请求中$请求头 – 字段 $ 信息 $ 信息 $ 的 IP 地址 $ 的端口 $ 使用的协议，例如 HTTP/1.0、 HTTP/1.1`$ $ 服务器名称 $ 服务器端口号

解决跨域

让我们首先追踪源头，跨域究竟发生了什么。

跨域的定义

同源策略限制了从同源加载的文档或脚本如何与来自另一个源的资源进行交互。这是隔离潜在恶意文件的重要安全机制。不同源之间的读操作一般是不允许的。

同源性的定义

如果两个页面的协议、端口（如果指定）和域名相同，则它们具有相同的来源。

解决跨域的原理

例如：

现在我正在向跨域提出请求。

现在我们只需要启动一个服务器，将其设置为 ，然后相应地设置它来拦截前端需要跨域的请求，最后将请求代理回来。比如下面的配置：

server {        listen       80;        server_name  fe.server.com;        location / {                proxy_pass dev.server.com;        }}

这样就可以完美绕过浏览器的同源策略：访问属于同源访问，转发给服务器的请求不会触发浏览器的同源策略。

请求过滤

按状态码过滤

error_page 500 501 502 503 504 506 /50x.html;    location = /50x.html {        #将跟路径改编为存放html的路径。        root /root/static/html;    }

根据 URL 名称过滤，精确匹配 URL，将所有不匹配的 URL 重定向到首页。

location / {    rewrite  ^.*$ /index.html  redirect;}

按请求类型过滤。

if ( $request_method !~ ^(GET|POST|HEAD)$ ) {        return 403;    }

推荐大家使用，非常好用的BUG监控工具~

配置 gzip

GZIP 是指定的三种标准 HTTP 压缩格式之一。目前，大多数网站都使用 GZIP 传输 HTML、CSS 和其他资源文件。

对于文本文件，GZip的效果非常明显，打开后传输所需的流量会减少到1/4~1/3左右。

并非所有浏览器都支持 gzip。如何知道客户端是否支持gzip？请求标头中的 – 标识对压缩的支持。

启用 gzip 需要客户端和服务器的支持。如果客户端支持gzip解析，那么只要服务器可以返回gzip文件，就可以开启gzip。我们可以将服务器配置为支持 gzip。下面的 -:gzip 表示服务器开启了 gzip 压缩方式。

    gzip                    on;    gzip_http_version       1.1;            gzip_comp_level         5;    gzip_min_length         1000;    gzip_types text/csv text/xml text/css text/plain text/javascript application/javascript application/x-javascript application/json application/xml;