nginx部署/代理/跨域

作者: 王一诺Eno | 来源:发表于2019-06-03 12:00 被阅读8次

关于nginx,咱们先了解nginx在开发过程中的主要作用

  • nginx解决跨域
  • nginx负载均衡

一、nginx解决跨域

如果要理解什么是跨域

广义上的跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。即浏览器的同源策略/SOP限制引起的跨域也属于在内;

  • 那么什么是同源策略呢?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。同源策略即: 协议+域名+端口"三者相同

  • 常见的跨域场景如下:
        URL                                      说明                         是否允许通信

    http://www.baidu.com/hello.js
    http://www.baidu.com/world.js         同一域名,不同文件或路径           允许(无跨域)
    http://www.baidu.com/hello/world.js


    http://www.baidu.com:8000/hello.js
    http://www.baidu.com/hello.js         同一域名,不同端口                不允许(有跨域)

    http://www.baidu.com/hello.js
    https://www.baidu.com/world.js        同一域名,不同协议                不允许(有跨域)

    http://www.baidu.com/hello.js
    http://192.168.22.128/world.js        域名和域名对应ip                 不允许(有跨域)

    http://baidu.com/hello.js
    http://x.baidu.com/hello.js           主域相同,子域不同                不允许(有跨域)
    http://www.baidu.com/hello.js

    http://www.baidu.com/hello.js
    http://www.bai.com/world.js           不同域名                        不允许(有跨域)

常见的跨域解决方案有如下:
1. jsonp解决跨域
2. document.domain + iframe解决跨域
3.  nginx代理解决跨域
4.  nodejs中间件代理解决跨域

重点来了 nginx代理解决跨域;

server {
          listen       80;
          server_name  localhost; //前端域名 具体原理解释在下方

          location / {  // location / 代理所有请求 而如果是 location /api 则匹配到有/api 前缀的请求才会代理
                  proxy_pass www.baidu.com; // 服务端域名
          }
  }
  1. 前端server域名是localhost
  2. 服务器server域名是www.baidu.com

根据浏览器的SOP/同源策略 localhost对www.baidu.com发起请求一定会出现跨域问题;但现在只要我们启动nginx服务器把server_name设置成前端的域名,
此时前端发起的请求相当于是localhost对localhost发起,这样是不会引起跨域的;但真实情况是,nginx对localhost的请求代理回 www.baidu.com


这里赘述一下什么是代理;

代理是在服务器和客户端之间假设的一层服务器(中间服务器),代理将接收客户端的请求并将它转发给服务器,然后将服务端的响应转发给客户端。

代理分为正向代理和反向代理:具体区别自行百度...

二、nginx负载均衡


nginx是通过把请求分发到服务器列表来实现负载均衡的;具体实现如下:

          upstream balance.com{
                         server 192.168.2.100:42000;
                         server 192.168.2.101:42000;
                         server 192.168.2.102:42000;
            }



            server {
                    server_name  fe.server.com;
                    listen 80;
                    location /api {
                            proxy_pass http://balance.com;
                    }
            }

上面的配置只是指定了nginx需要转发的服务端列表,并没有指定分配策略。

nginx负载均衡策略

  1. 轮询策略

    轮询策略是默认的策略,把每个请求按顺序逐一分配到不同的server,如果server挂掉,能自动剔除

    upstream balance.com{
            server 192.168.2.100:42000;
            server 192.168.2.101:42000;
            server 192.168.2.102:42000;
        }
  1. 最少连接数策略

把请求优先分配给连接数最少的server,可以平衡每个队列的长度;

    upstream balance.com{
            least_conn;
            server 192.168.2.100:42000;
            server 192.168.2.101:42000;
            server 192.168.2.102:42000;
        }
  1. 最快响应时间策略

优先分配给响应时间最短的服务器。


  upstream balance.com {
     fair;
    server 192.168.2.100:42000;
    server 192.168.2.101:42000;
    server 192.168.2.102:42000;
 }

  1. 权重策略

使用weight来指定server访问比率,weight默认是1。访问率比例等于权重比例;

    upstream balance.com{
             server 192.168.2.100:42000 weight=1;
             server 192.168.2.101:42000 weight=2;
             server 192.168.2.102:42000 weight=3;
        }
  1. 客户端ip绑定 ip_hash

每个请求会按照访问ip的hash值分配,这样同一客户端连续的Web请求都会被分发到同一server进行处理,可以解决session的问题。如果server挂掉,能自动剔除。

    upstream balance.com{
        ip_hash;
        server 192.168.2.100:42000 weight=1;
        server 192.168.2.101:42000 weight=2;
        server 192.168.2.102:42000 weight=3;
    }
  1. backup 标记为备份服务器。当主服务器不可用时,将传递与备份服务器的连接。
    upstream balance.com{
        server 192.168.2.100:42000 backup;
        server 192.168.2.101:42000;
    }

本文介绍的是基础功能,如果想了解更多请转nginx文档

以上是博主目前了解和使用到的一些技巧和知识啦,至于关于nginx部署后404问题请看@安静Eno| vue框架下部署上线后刷新报404问题解决方案

尊重原著 文章转自@安静Enonginx部署/代理/跨域

相关文章

  • nginx部署/代理/跨域

    关于nginx,咱们先了解nginx在开发过程中的主要作用 nginx解决跨域 nginx负载均衡 一、nginx...

  • 用nginx的反向代理机制解决前端跨域问题

    用nginx的反向代理机制解决前端跨域问题 Vue做前台,后台走接口就会遇到跨域问题。这里Nginx做反向代理是一...

  • nginx反向代理

    前端调用接口的时候跨域了怎么办呢,如下代码跨域: 通过nginx反向代理下载nginx:http://nginx....

  • ajax跨域--nginx反向代理

    用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持...

  • vue生产环境部署

    vue生产环境部署 Nginx部署静态资源文件和解决跨域问题下载Nginx下载地址:http://nginx.or...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • Koa代理Http请求

    Koa 代理http请求,解决跨域问题 1、为什么用Koa做跨域代理? "最初为了解决跨域问题,我把站点部署到了n...

  • webpack设置代理出现的问题

    一、解决跨域问题有几种解决方案:跨域资源共享 CORSjsonpproxy (Nginx代理或其他的服务器代理)在...

  • 4种方法解决js跨域的实现方式

    一、JSONP 使用ajax实现跨域: 二、CORS跨域资源共享 三、Nginx反向代理 四、webpack (在...

  • nginx express 反向代理实现

    nginx 反向代理跨域https://segmentfault.com/a/1190000012859206 e...

网友评论

    本文标题:nginx部署/代理/跨域

    本文链接:https://www.haomeiwen.com/subject/mjfcxctx.html