前后端分离项目本地部署404
时间: 2025-01-30 15:43:49 浏览: 41
### 解决前后端分离项目本地部署时的404错误
#### 配置Nginx转发规则
对于前后端分离架构,在本地环境中配置Nginx作为反向代理可以有效解决资源找不到的问题。具体来说,当请求到达Nginx时,它会根据设定的路径匹配规则将请求分发给相应的服务处理。
针对静态文件访问失败的情况,确保`location /`部分指向了前端构建后的静态文件目录:
```nginx
location / {
root 你前端打包好的dist的路径;
try_files $uri $uri/ /index.html;
}
```
此设置允许任何未命中API接口的URL最终被导向至`index.html`,从而让前端路由接管[^2]。
#### 后端API路径映射
为了使前端能够正确调用后端提供的RESTful API接口,需进一步定义特定前缀下的代理规则,比如:
```nginx
location /api/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/;
}
```
这里假设后端运行于同一台机器上的8080端口上,并通过`/api/`来区分来自不同源站的服务请求。
#### 修改控制器注解
考虑到某些情况下即使上述网络层面调整完毕仍可能出现异常响应,则应检查Spring Boot应用中的控制层组件是否恰当标注了返回JSON数据所需的`@RestController`而非仅限于渲染模板页面用途的`@Controller`:
```java
@RestController // 替换 @Controller 来指示该类用于生产 RESTful Web Service
@RequestMapping("/example")
public class ExampleController {
@GetMapping("/hello")
public String hello() {
return "Hello, world!";
}
}
```
这一步骤确保了HTTP GET `/example/hello`能直接获得预期的消息体而不是试图寻找对应的HTML片段[^3]。
#### 处理跨域资源共享(CORS)
最后还需注意浏览器同源策略带来的限制——即默认不允许JavaScript发起跨越多个域名之间的AJAX请求。为此可在应用程序初始化阶段全局开启CORS支持或按需指定许可范围内的外部站点列表:
```java
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")// 对所有的path都生效
.allowedOrigins("*") // 允许所有来源
.allowCredentials(true)// 支持Cookie凭证发送
.maxAge(3600); // 缓存时间1小时
}
}
```
以上措施共同作用可极大程度减少因环境差异引发的各种兼容性障碍并保障开发效率[^4]。
阅读全文
相关推荐


















