面試題：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 *;}複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。