面试题：nginx有配置过吗?反向代理知道吗?

时间 2020-05-06

标签面试 nginx 配置反向代理知道栏目快乐工作繁體版

原文原文链接

这篇文章主要是针对跨域进行配置，若是大佬们会配置的话，就不用看了~html

简述反向代理和正向代理

反向代理：

咱们将请求发送到服务器，而后服务器对咱们的请求进行转发，咱们只须要和代理服务器进行通讯就好，偷个图：

正向代理：

对于目标服务器来说，感觉不到真实的客户端，与它通讯的是代理客户端，如科学谷歌的软件就是一个正向代理，偷个图：

举个正向代理的例子， 我(客户端)没有绿码出不了门，可是 朋友(代理)有， 我(客户端)让 朋友(代理)去超市买瓶水，而对于 超市(服务器)来说，他们感知不到 我(客户端)的存在，这就是正向代理。

举个反向代理例子，我(客户端)让朋友(代理)去给我买瓶水，并无说去哪里买，反正朋友(代理)买回来了，对于我(客户端)来说，我(客户端)感知不到超市(服务器)的存在，这就是反向代理。node

简单归纳下就是，服务器代理被称为反向代理，客户端代理被称为正向代理。
nginx

nignx如何配置？

nignx下载

http://nginx.org/en/download.htmljson

文件目录

其余目录也没研究，跟本次的跨域也不搭边(我还没学会~)

启动服务

在这个目录下，打开cmd命令行，输入nginx，你也能够双击nginx.exe，但显得不直观，访问Localhost:80端口，就能够看到下方的界面，
api

不想要的话，能够自行修改，进入配置文件目录，跨域

优化配置代码

删除注释和无关代码后的文件长这样：bash

第一个location中的root和index字段也能够删掉，毕竟和咱们此次跨域没啥关系~
红框中的error_page和它下面的location也能够删掉，理由和上面同样

删除上述两项后的代码以下，

启动服务

先来启动一个node服务：服务器

const http = require('http');

http.createServer(function (request, response) {
    response.writeHead(200, {
        'Content-Type': 'application/json;charset=utf-8'
    });
    // 这个例子中要回传的data
    let data = {
        name: 'nginx proxy'
    };

    data = JSON.stringify(data);

    response.end(data);

}).listen(8887);

console.log('server1 is listen at 8887 port');复制代码

错误示范

启动服务后，咱们直接进行访问，模拟跨域场景：app

<body>
    <h1>nginx反向代理</h1>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost:8887');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    console.log(xhr)
                }
            }
        }
    </script>
</body>复制代码

果不其然报了跨域的错误：优化

开始配置

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {

        }
    }
}
复制代码

咱们在location里面加上两个字段：

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            proxy_pass  http://localhost:8887;
            add_header  Access-Control-Allow-Origin *;
        }
    }
}复制代码

proxy_pass，表明要代理的服务器端口
add_header，了解过CORS的朋友应该知道，这个是配置响应头
listen，表明监听的端口

如今修改下请求的代码：

<body>
    <h1>nginx反向代理</h1>
    <script>
        var xhr = new XMLHttpRequest();
        // 在这里把原来的localhost:8887修改为localhost:80
        xhr.open('GET', 'http://localhost:80');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    console.log(xhr)
                }
            }
        }
    </script>
</body>复制代码

修改完毕后重启服务，这里提供两种方式，不过都得在文件目录下新开一个cmd命令行，

直接重启。输入
```
nginx -s reload复制代码
```
先关闭再开启。输入
```
nginx -s stop
nginx复制代码
```

若是是想对服务器上的api文件夹下发请求的话，那就只须要修改配置文件中的这个字段就行，

location /api {
    // 你的代码，如
    // proxy_pass 你的路径
    // add_header Access-Control-Allow-Origin *;}复制代码