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

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

简述反向代理和正向代理

反向代理:

我们将请求发送到服务器,然后服务器对我们的请求进行转发,我们只需要和代理服务器进行通信就好,偷个图:

正向代理:

对于目标服务器来讲,感受不到真实的客户端,与它通信的是代理客户端,如科学谷歌的软件就是一个正向代理,偷个图:

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

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

简单概括下就是,服务器代理被称为反向代理,客户端代理被称为正向代理。

nignx如何配置?

nignx下载

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

文件目录

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

启动服务

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

不想要的话,可以自行修改,进入配置文件目录,

优化配置代码

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

  1. 第一个location中的root和index字段也可以删掉,毕竟和我们这次跨域没啥关系~
  2. 红框中的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');

错误示范

启动服务后,我们直接进行访问,模拟跨域场景:

<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 *;
        }
    }
}
  1. proxy_pass,代表要代理的服务器端口
  2. add_header,了解过CORS的朋友应该知道,这个是配置响应头
  3. 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命令行,

  1. 直接重启。输入

    nginx -s reload

  2. 先关闭再开启。输入

    nginx -s stop
    nginx

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

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



原文链接:juejin.im

上一篇:基于 HTML5 的 PID-进料系统可视化界面
下一篇:30分钟,带你实现一个符合规范的 Promise(巨详细)

相关推荐

  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两个方法都可以用来判断变量类型 区别:前者是判断这个变量是什么类型,后者是判断这个变量是不是某种类型,返...

    6 个月前
  • 高频JS手撕面试题(尊享版)

    写在开始 最近看了这篇文章, 然后觉得,是不是得来一个自己的。 参考文献的代码组织分布不同的js版本,需要来回的切换思路。另外删除了一些重复的章节。 面试真的需要一个比较标准,和易于记忆的答案。

    12 天前
  • 高级前端面试题大汇总(只有试题,没有答案)

    面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍...

    2 年前
  • 项目部署阶段nginx

    创建环境变量, 创建.env.production #这个前缀可以让nginx作反代 VUE_APP_BASE_API = '/api'改一下输出地址,vue.confifig.jsoutputD...

    7 个月前
  • 面试题|手写JSON解析器

    这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言)。

    8 个月前
  • 面试题:没有es6老项目,如何用jq解决异步的问题?

    我们都知道es6提供了promise异步写法,但是大部分的公司都是jq写的,那我们如何用Jq来写和promise异步一样的写法呢?这个知道的人不多下面我们就来写写把 注意: 1 JQ 1.5以上 2 ...

    3 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    1 年前
  • 面试题(前端-字节跳动)

    只是做个记录 第一题 我叫王大锤,是一家出版社的编辑。我负责校对投稿来的英文稿件,这份工作非常烦人,因为每天都要去修正无数的拼写错误。但是,优秀的人总能在平凡的工作中发现真理。

    1 年前
  • 面试题重点突出

    什么是跨域?跨域请求资源的方法有哪些? 1、什么是跨域? 由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况: 网络协议不同,如http协...

    2 年前
  • 面试题里的那些各种手写

    最近准备初级前端面试,发现有很多手写实现什么的,例如什么手写实现bind,promise。手写ajax,手写一些算法。 翻阅了很多书籍和博客。 这里做一个总结改进,算是对我后面大概为期一个月找工作的准...

    2 年前

官方社区

扫码加入 JavaScript 社区