Nginx反向代理解决跨域问题访问后台接口（同一个服务器）+部署springboot项目（前后端分离）

前言：博主已经将自己的vue项目部署在nginx上边，服务器是阿里云服务器，今天是要部署springboot后台并实现前台请求转发到后台，踩了很多坑，记录一下。

一、服务器环境

阿里云服务器
- jdk1.8
- docker（以下是容器）
  - Redis
  - Rabbitmq
  - mysql8.x

二、服务器配置jdk环境

三、部署springboot

在这里插入图片描述
双击package即可进行打包，博主设置的是jar包
生成之后如下

然后我们直接将该jar包往服务器上一丢（随便找个文件夹，或者自己建一个）
cd 到jar包位置，执行以下命令

$ nohup java -jar 包名.jar >log.txt &

// 这种方法会把日志文件输入到你指定的文件中，没有则会自动创建。并且进程会在后台运行。
// 不要忘记后边的  &

我们查看一下端口情况，我的占用的是8001端口，执行netstat -anp |grep 8001，看到如下
在这里插入图片描述

此时，后台已经跑起来了，并且有一些tcp连接随时待命

四、修改Nginx配置

方案一

在没有设置代理的情况下，客户端请求到nginx，nginx服务器是不会进行转发的，接下来我们配置一下，vim /etc/nginx/nginx.conf或者拷贝到本地修改再上传
在这里插入图片描述

# 核心配置
 server {
        listen       8080;
        server_name  xxxxxxx;
        # root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
	    root /dist;
	    index index.html;
	    try_files $uri $uri/ /index.html;
        }
        
		location /api {
			add_header Access-Control-Allow-Origin *;
    		add_header Access-Control-Allow-Methods 'GET, POST, DELETE, PUT, OPTIONS';
    		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
     				return 204;
   			}
			rewrite ^/api/(.*)$ /$1 break;
			proxy_pass http://xxxxxxx:8001;
		}
}

修改完之后，重启nginx，nginx -s reload，如果启动失败，报.pid文件的错，比如：

nginx: [error] open() "/run/nginx.pid" failed (2: No such file or directory)

也就是没有改文件，我们找到报错目录，并在其下新建nginx.pid文件，然后nginx -s stop关闭服务，然后nginx -c /etc/nginx/nginx.conf直接以配置文件重启，注意，nginx.pid所在的路径必须和配置文件中配置的pid文件路径一样，我这里是/run/nginx.pid

然后就可以访问了
当浏览器发送ip+8080请求时，nginx响应前端资源，在页面内，我们点击按钮，或者提交表单等操作请求服务器时，nginx检测到api字样则进行转发处理，添加上请求头删除api字样，然后转发到后台接口进行处理

附：nginx.conf

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
	
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       8080;
        server_name  xxxxxx;
        # root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
	    root /dist;
	    index index.html;
	    try_files $uri $uri/ /index.html;
        }
		
		location /api {
			add_header Access-Control-Allow-Origin *;
    		add_header Access-Control-Allow-Methods 'GET, POST, DELETE, PUT, OPTIONS';
    		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
     				return 204;
   			}
			rewrite ^/api/(.*)$ /$1 break;
			proxy_pass http://xxxxxx:8001;
		}

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers PROFILE=SYSTEM;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

方案二

这个方案我没有使用过，只是理论上可行
具体思路是：

（前后端都在同一个服务器）添加一个server，监听一个端口比如8888端口，vue中axios的baseurl请求端口改成8888，然后添加代理，进行转发到8001端口

以上都为博主个人理解，如有不对，麻烦指出
在这里插入图片描述

路途芬芳

原创文章 50 获赞 101 访问量 1万+

关注私信