Nginx反向代理解决前端跨域问题

笔者正在漫漫前端路上，文中如有不正确、不恰当的地方请评论告诉我，非常感谢！ 😊

工具：sftp Xshell

一、下载nginx

使用的版本是：nginx-1.19.4.tar.gz

官网：nginx.org/en/download…

二、连接服务器

1、创建nginx目录：`mkdir nginx`

2、`cd nginx`

3、配置nginx安装所需的环境

yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
复制代码

4、使用sftp传入压缩包

5、解压缩

tar -zxvf nginx-1.19.4.tar.gz
复制代码

6、进入加压文件

解压之后，进入加压文件，即cd nginx-1.19.4
然后进行配置，推荐使用默认配置，直接./configure 就好了，如下图所示：.

7、编译安装nginx

首先在当前目录（/usr/local/nginx-1.19.4）进行编译。输入make即可：

make
复制代码

编译成功之后，就可以安装了，输入以下指令：

make install
复制代码

8、启动nginx

进入/usr/local/nginx/sbin目录，输入./nginx即可启动nginx

./nginx
复制代码

9、设置nginx开机启动

只需在rc.local增加启动代码即可。

vim /etc/rc.local
复制代码

按键盘 i 然后在底部增加：

/usr/local/nginx/sbin/nginx
复制代码

三、部署

把生成的dist目录下的静态资源传输到服务器，可以放在usr/local/nginx下

1、修改配置文件

此外，进入cd /usr/local/nginx/conf目录可修改nginx的配置文件：

vim nginx.conf
复制代码

按键盘i进行编辑，编辑完成按 Esc,再输入 :wq

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       4000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root /usr/local/nginx/dist/; //前端项目dist包路径 
    
        location / {
            index  index.html index.htm;
        }
     
        location /metabase{  //解决跨域问题 rewrite处理metabase占位
          proxy_pass http://172.27.28.155:3000;
          rewrite ^/metabase/(.*)$ /$1 break;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}
复制代码

如果需要配置多个vue项目，只需添加多个server配置即可。

server {
        server_name  userportrait.hundsun.com;
        listen       4000;

        #charset koi8-r;

        access_log  /nas/root/userportrait/nginx-logs/host.access.log;
        error_log /nas/root/userportrait/nginx-logs/host.error.log;
        root /usr/local/nginx/dist/;

        location / {
            index  index.html index.htm;
        }

        location /userPortrait {
          proxy_pass http://127.0.0.1:9086;

        }

        location /metabase{
          proxy_pass http://userportrait.hundsun.com:3000;
          proxy_set_header Host $http_host;
          proxy_pass_header Set-Cookie;
          #resolver 127.0.0.1;
          #set $backend "userportrait.hundsun.com:3000";
          #proxy_pass http://$backend; 
          rewrite ^/metabase/(.*)$ /$1 break;
        }
复制代码

2、重启nginx

在/nginx/sbin/目录下

重启：

./nginx -s reload
复制代码

四、遇到的问题

问题场景一

服务器重启后，重启nginx时报错nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)，进入到logs目录发现确实没有nginx.pid文件

解决办法

使用指定nginx.conf文件的方式重启nginx

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
复制代码

还有一种可能就是nginx.conf的nginx.pid被注释了,将下图中pid前的#去掉,保存退出再次启动nginx

此时去logs目录下查看发现nginx.pid文件已经生成了

问题场景二

nginx配置 server_name用本机ip可以访问，用域名无法访问