nginx处理跨域

缺乏、安全感 2024-04-17 13:53 92阅读 0赞

为什么要抛出这个话题？

最近从`mac`转成用`window`来开发，在安装`nginx`的时候碰了下钉子，那我就不开心了。想着既然都安装好了，那么就搞点事情吧~

### window上安装nginx ###

简单讲下在`window`上安装`nginx`~

#### 下载软件并安装 ####

*  通过[download][]下载你需要的版本，我这里下载了稳定版本[nginx/Windows-1.16.0][nginx_Windows-1.16.0]
 *  直接解压此文件即可

#### 基本操作 ####

进入解压的文件夹（nginx.exe）的上一级。

*  启动：nginx
    
     *  启动之后就可以在localhost:80访问你的项目了，前提是你的80端口没有被占用
 *  停止
    
     *  快速停止：nginx -s stop
     *  优雅停止：nginx -s quit
 *  重新加载：nginx -s reload
    
     *  使用情况-更改配置；开启一个新的工作进程；优雅关闭了旧的工作进程想重新启动
 *  重新打开：nginx -s reopen
    
     *  重新打开日志文件

#### 注意事项 ####

在出现`pid`被占用的情况，你可以通过下面的方法处理：

1.  在任务管理器中手动移除nginx占用的进程
2.  执行`tasklist /fi "imagename eq nginx.exe"`找出nginx占用的进程

映像名称                       PID 会话名              会话# 内存使用
    ========================= ======== ================ =========== ============
    nginx.exe                     8248 Console                    1      7,076 K
    nginx.exe                     3052 Console                    1      7,508 K
    复制代码

之后kill相关的进程就行了。

注意：有时候移除了占用的`PID`后还是不行，那重启下电脑~

启动`nginx`后，在浏览器上输入`localhost`你会看到其成功启动的页面，如下图：

### 跨域问题 ###

对于跨域的概念就不详细说了...

我们先关闭`nginx`代理，然后开启两个`node`服务来进行验证，刚开始的时候，我是这样处理的：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>nginx</title>
    </head>
    <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.responseText) } } } </script>
    </body>
    </html>
    复制代码

我开启了第一个服务`server.js`

const http = require('http');
    const fs = require('fs');
    
    http.createServer(function(request, response) {
        const html = fs.readFileSync('index.html', 'utf8');
        response.writeHead(200, {
            'Content-Type': 'text/html'
        });
        response.end(html);
    }).listen(8888);
    
    console.log('server is listening at 8888 port');
    复制代码

好，我开启第二个服务来提供数据源`server2.js`

可是由于浏览器的同源策略，我没能请求到数据~

我的另外一个开启的服务是有数据的：

来，`nginx`派上用场了，我修改下上面`html`个文件的代码，如下：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>nginx</title>
    </head>
    <body>
        <h1>nginx反向代理</h1>
        <script> var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://localhost/api'); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(xhr.responseText) } } } </script>
    </body>
    </html>
    复制代码

### nginx代理 ###

来，我们修改下`nginx.conf`文件，如下：

http {
        server {
            ...
            location / {
                root   html;
                index  index.html index.htm;
            }
            # 加入的内容
            location /app/ {
                proxy_pass http://localhost:8888/;
            }
            # 加入的内容
            location /api/ {
                proxy_pass http://localhost:8887/;
            }
        }
    }
    复制代码

然后开启我们的`nginx`服务之后，就重启`server.js`和`server2.js`服务。之后在浏览器上打开`localhost/app/`就在`console`上看到请求过来的数据了~

### 参考和后话 ###

更多的内容，请戳[我的博客][Link 1]进行了解，能留个star就更好了?

转载于:https://juejin.im/post/5d4a4c67f265da03cf7a7729

[download]: https://link.juejin.im?target=http%3A%2F%2Fnginx.org%2Fen%2Fdownload.html
[nginx_Windows-1.16.0]: https://link.juejin.im?target=http%3A%2F%2Fnginx.org%2Fdownload%2Fnginx-1.16.0.zip
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Freng99%2Fblogs