当前位置：首页 > news >正文

【实战指南】前端项目Nginx配置全流程：从打包部署到解决跨域/路由循环问题

news 来源：原创 2025/6/13 10:36:17

一、场景需求
作为前端开发者，我们需要将Vue/React项目通过Nginx部署，并实现：

生产环境代理后端API
支持SPA路由刷新不404
解决联调时的跨域问题
为实施团队提供测试环境访问入口

二、环境准备
前端项目：vue2
服务器：Windows Server 2019
Nginx版本：1.28.0
后端接口：http://192.16.1.14:8092

三、完整配置流程
步骤1：前端项目打包
npm run build
生成dist目录（包含index.html和静态资源）

步骤2：Nginx基础配置
在nginx1.28.0文件夹下找到conf文件夹，其中的nginx.conf就是nginx的配置文件
在这里插入图片描述

worker_processes  1;events {worker_connections  1024;
}http {server {listen       8100;//端口可能会被占用，如占用，需要更换server_name  192.16.1.100;root         html/dist; # 前端资源路径# 处理静态资源location / {try_files $uri $uri/ /index.html;index  index.html;}# 代理后端APIlocation /api/ {proxy_pass http://192.16.1.14:8092/;//后端地址proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}location /flow/ {proxy_pass http://192.16.1.58:8093/;//前端地址proxy_redirect default;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header Host $host:$server_port;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}
}

步骤3：部署文件
将dist文件夹复制到Nginx目录下的html/文件夹：

nginx-1.28.0
├── html
│ └── dist
│ ├── index.html
│ └── static
└── conf
└── nginx.conf
在这里插入图片描述

四、在nginx-1.28.0目录下打开cmd，输入start nginx ,启动nginx

在这里插入图片描述

五、常见报错及解决方案
报错1：端口占用
[emerg] bind() to 0.0.0.0:8100 failed (10013: An attempt was made…)
解决方案：

#查找占用进程
netstat -ano | findstr “:8100”

#终止进程（需管理员权限）
taskkill /pid /f
报错2：路由循环
rewrite or internal redirection cycle while redirect to named location “@router”
问题原因：
错误配置了SPA路由回退规则

修正方案：

location / {
try_files $uri $uri/ /index.html; # 删除@router规则
}
报错3：跨域问题
Access-Control-Allow-Origin missing
解决方案二选一：

Nginx添加响应头：
location /api/ {
proxy_pass http://backend;
add_header ‘Access-Control-Allow-Origin’ '';
}
后端配置CORS（推荐）：
// Spring Boot示例
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping(“/**”).allowedOrigins("");
}
};
}
报错4：静态资源404
GET /js/app.js 404 (Not Found)
检查要点：

确认root路径是否正确
检查文件权限（Linux需chmod -R 755 dist）
避免路径包含中文

六、最终效果验证
访问前端页面：http://192.16.1.58:8100
测试API接口：http://192.16.1.58:8100/api/login
七、总结
通过本文的Nginx配置方案，我们实现了：
✅ 前后端分离部署
✅ 接口代理和跨域解决
✅ SPA路由支持
✅ 多环境快速切换

在这里插入图片描述