部署后Angular 2前端无法连接Spring Boot后端求助

Hey there, let's work through this problem step by step! It’s super common for apps to work smoothly in dev but hit snags when deployed, especially with frontend-backend connectivity. Since you suspect WAR packaging might be missing config, here are the key areas to check and fix:

1. Verify Angular’s API Base URL Configuration #

In development, you might have used a proxy.conf.json to route API calls to your local Spring Boot server—but this proxy doesn’t carry over to production. You need to explicitly set your backend’s deployed URL in Angular’s production environment:

• Open src/environments/environment.prod.ts and update it to include your backend’s full URL:

  export const environment = {
    production: true,
    apiBaseUrl: 'http://env-7423163.cloud.cms500.com'
  };
  

• In all your Angular services, replace hardcoded API paths with this environment variable (e.g., ${environment.apiBaseUrl}/api/users instead of /api/users).
• Make sure you build for production with the correct flag: ng build --prod—this ensures your app uses the prod environment config instead of dev.

2. Fix CORS Configuration on Spring Boot #

Browsers enforce strict CORS rules in production, even if they let things slide in dev. Your backend needs to explicitly allow requests from your frontend domain (http://www.demo.aranidhi.in):

• Add a global CORS config in your Spring Boot app:

  @Configuration
  public class CorsConfiguration implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("http://www.demo.aranidhi.in")
                  .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                  .allowedHeaders("*")
                  .allowCredentials(true);
      }
  }
  

• If you’re using Spring Security, make sure CORS is processed before security filters by adding .cors(withDefaults()) to your SecurityFilterChain bean.

3. Check WAR Context Path and Packaging #

If your Spring Boot WAR is deployed with a context path (e.g., http://env-7423163.cloud.cms500.com/my-app), your Angular API calls need to include this path:

• Check your Spring Boot application.properties/application.yml for server.servlet.context-path—if it’s set, add this path to your Angular apiBaseUrl.
• Double-check your pom.xml (if using Maven) to ensure WAR packaging is correctly configured:

  <packaging>war</packaging>
  
  <dependencies>
      <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-web</artifactId>
      </dependency>
      <!-- Add servlet API dependency if needed -->
      <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
          <scope>provided</scope>
      </dependency>
  </dependencies>
  
  <build>
      <plugins>
          <plugin>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-maven-plugin</artifactId>
          </plugin>
      </plugins>
  </build>
  

4. Debug with Browser Dev Tools #

Open your browser’s DevTools (F12) and go to the Network tab to inspect failed API requests:

• Look for status codes like 404 (wrong API path), 403 (CORS/permission issue), or 500 (backend error).
• Verify the request URL matches your backend’s deployed address—typos here are easy to miss!

5. Test Server Connectivity #

Ensure your frontend server can reach the backend:

• SSH into your frontend server and run a curl command like curl http://env-7423163.cloud.cms500.com/api/health to check if you get a valid response.
• Confirm your backend server’s firewall/security group allows incoming requests from your frontend server’s IP.

Start with the environment URL and CORS checks—those are the most frequent causes of this exact issue. If you can share the specific error message from your browser console, we can narrow things down even further!

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