You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何解决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

火山引擎 最新活动