Spring应用BDD测试时跨端口Vue.js前端连接404问题求助

Hey there! Let's work through this 404 issue you're hitting between your Spring BDD tests and Vue frontend running on a different port. Here are the most common fixes to check step by step:

1. 先确认前端服务状态与端口匹配 #

First things first—make sure your Vue app is actually up and running on the correct port. If you're using the default Vue CLI setup, it runs on localhost:8080, but if you've customized the port (check vue.config.js for devServer.port), you need to use that exact port in all your Spring test configurations.

If your test is sending requests to the frontend, double-check the base URL you're using matches where Vue is hosted. For example, if Vue is running on localhost:3000, your test should target http://localhost:3000/your-target-path instead of the default 8080.

2. 核对请求路径与Vue路由/资源是否一致 #

If your BDD test is trying to access a Vue route or static resource, ensure the path is correct:

• Vue's client-side routes might require a base path (if you set publicPath in vue.config.js). For example, if you configured publicPath: '/plant-app', your test needs to hit http://localhost:[port]/plant-app/your-route instead of just the route path.
• Static assets like images or JS files are served from Vue's public folder—make sure your test is requesting the full absolute path (e.g., http://localhost:[port]/logo.png) instead of a relative path that doesn't account for the separate port.

3. 配置Spring CORS支持（如果是前端调用Spring接口） #

Wait, if the actual issue is the Vue frontend calling your Spring API and getting 404, you need to handle cross-origin requests since they're on different ports. Here's how to enable CORS in Spring:

Add a CORS configuration bean to your Spring application:

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // Replace [vue-port] with your actual Vue running port
        config.addAllowedOrigin("http://localhost:[vue-port]");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

Or if you're using Spring Boot 2.4+, you can set this directly in application.properties:

spring.web.cors.allowed-origins=http://localhost:[vue-port]
spring.web.cors.allowed-methods=*
spring.web.cors.allowed-headers=*

4. 调整Spring BDD测试的上下文配置 #

Looking at your test code snippet, you're using @WebAppConfiguration and @ContextConfiguration(classes = MainApplication.class). To make sure your test can properly interact with external services like the Vue frontend:

• Switch to @SpringBootTest instead of @ContextConfiguration—it loads the full application context, including any external URL properties you've defined.
• Define a test-specific property for the frontend base URL to keep things flexible. Add this to application-test.properties:

  frontend.base-url=http://localhost:[vue-port]
  

  Then inject it into your test class:

  @Value("${frontend.base-url}")
  private String frontendBaseUrl;
  

  Use this injected URL whenever you need to make requests to the frontend in your BDD steps.

5. 排查Spring的路径映射前缀 #

If your Spring controllers have a global path prefix (like @RequestMapping("/api")), make sure your frontend is using the full path including that prefix. For example, if your Plant controller is mapped to /api/plants, the Vue app should call http://localhost:[spring-port]/api/plants instead of just /plants.

内容的提问来源于stack exchange，提问作者Ivan