前言

今天在部署若依前后端到服务器上时，发现前端的验证码怎么都出不来，随便上网一查，相关问题以及解决方案数不胜数，遗憾的是，没有一条适合我的。

技术

若依前后端框架：

• ​ 前端：vue
• ​ 后端：springboot、springmvc、mybatis

服务器：centos7+Nginx配置

配置思路

之前有介绍过前后端分离项目如何部署到服务器，忘记的可以点连接去看看，前后端分离项目部署上线详细教程

1. 将后端springboot项目打包成jar文件，传至服务器指定目录下。
2. 将前端vue项目打包成dist文件夹，传至服务器指定目录下，我一般习惯和对应的后端jar包放在同一目录下。
3. 解析域名至服务器下（不会的可以自行百度，很简单）
4. 配置Nginx文件（验证码没有出来，就是没有正确配置Nginx文件）
5. 在终端启动后端项目
6. 在浏览器访问已经配置好的域名

错误信息

前端页面可以访问，但是验证码没有加载出来（暂无图），F12打开查看发现请求报错。

解决方法

找了半天，发现是Nginx配置错误，正确配置代码如下所示：

# 这里配置的是80端口监听
    server {
        listen       80;
        server_name  这里写你的域名;
 
    location / {
            root   /www/wwwroot/facilities/dist;
      			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        
      		
      		location /prod-api/ {
  
            proxy_set_header Host $http_host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_pass http://localhost:7777/;
        }
			
		location /dev-api/ {
  
            proxy_set_header Host $http_host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header REMOTE-HOST $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_pass http://localhost:7777/;
        }

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

注意：在server_name处写你的域名即可。