如何解决VPS部署Spring Boot+Angular全栈项目时出现的net::ERR_CONNECTION_REFUSED及CORS问题
解决Spring Boot + Angular部署VPS后的连接拒绝与CORS问题
嘿,我刚看完你的问题,这其实是部署全栈应用时很常见的两个坑:后端服务没对外暴露导致连接拒绝,加上浏览器的私有网络安全限制引发的CORS报错。咱们一步步来解决:
1. 先搞定「ERR_CONNECTION_REFUSED」连接拒绝问题
你本地运行时,Spring Boot默认只绑定localhost(也就是127.0.0.1),这意味着只有VPS本机的进程能访问它,但你的前端是通过公网URL访问的——相当于从外部请求,自然连不上VPS内部的localhost。
解决方法很简单,让Spring Boot监听所有网卡(0.0.0.0),允许外部访问:
- 临时方案(启动jar时加参数):
java -jar your-spring-boot-app.jar --server.address=0.0.0.0 --server.port=8000 - 永久方案(修改配置文件):
打开Spring Boot的application.properties(或application.yml),添加这两行:server.address=0.0.0.0 server.port=8000
改完重启后端,先手动用VPS的公网IP+端口(比如http://xxx.xxx.xxx.xxx:8000/conversion)测试API能不能访问,确保后端已经对外暴露了。
2. 解决CORS的「私有地址空间」报错
你看到的那个CORS错误,不是普通的跨域问题——浏览器现在有个安全规则:如果前端是从公网域名(非本地上下文)发起请求,目标是localhost这种私有地址,浏览器会直接阻止,哪怕你配了普通的CORS规则也没用。
正确的做法是彻底改掉前端的请求目标:
第一步:修改Angular的API基地址
别再让前端请求localhost:8000了,换成VPS的公网IP或者你的域名,比如:
// 替换你项目里的API基地址配置 const API_BASE_URL = 'http://xxx.xxx.xxx.xxx:8000'; // 或者用你的域名,比如http://your-domain.com:8000
改完重新构建Angular项目(ng build --prod),把新的静态文件上传到VPS覆盖旧的。
第二步:配置Spring Boot的CORS规则
确保后端允许你的前端域名跨域请求,推荐用全局配置(一劳永逸):
创建一个CORS配置类:
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); // 替换成你的前端实际域名,比如http://your-frontend-domain.com config.addAllowedOrigin("http://your-frontend-url.com"); // 允许所有请求方法(GET/POST等) config.addAllowedMethod("*"); // 允许所有请求头 config.addAllowedHeader("*"); // 如果你的API需要携带Cookie,就打开这个 config.setAllowCredentials(true); // 对所有接口生效 source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } }
如果不想写配置类,也可以直接在Controller上加@CrossOrigin注解,指定允许的前端域名:
@RestController @CrossOrigin(origins = "http://your-frontend-url.com") public class ConversionController { // 你的API接口逻辑 }
3. 最后检查这两个关键点
- 确认VPS的防火墙/安全组开了8000端口:如果是云服务商的VPS(比如阿里云、腾讯云),得在控制台的安全组里添加入站规则,允许外部访问8000端口,不然防火墙会把请求挡回去。
- 如果前端用了HTTPS,后端最好也配HTTPS:不然浏览器可能还是会有安全限制。要是只是测试的话,可以临时在Chrome里关一下这个限制(别用于生产):地址栏输入
chrome://flags/#block-insecure-private-network-requests,把选项改成Disabled,重启浏览器再测。
内容的提问来源于stack exchange,提问作者Learner




