Webpack Dev Server代理未处理重定向问题求助（React+Spring Boot）

Got it, let's work through this redirect issue you're facing. The root problem here is that when your Spring Boot backend sends a redirect to localhost:8080/login for unauthenticated API requests, the Webpack Dev Server proxy isn't rewriting that URL to match your frontend's 3000 port. This leaves your browser trying to jump directly to 8080 instead of staying within your React app's context. Here are two solid solutions to fix this:

Option 1: Rewrite Redirect Headers via Webpack Proxy #

You can use the onProxyRes hook in your Webpack Dev Server config to modify the redirect URL returned by Spring Boot. This tells the proxy to swap out the backend's address with your frontend's port before sending the response to the browser.

Update your Webpack config like this:

devServer: {
  historyApiFallback: true,
  contentBase: './',
  proxy: [{
    context: ["/api"],
    target: "http://localhost:9090",
    changeOrigin: true,
    followRedirects: true,
    onProxyRes: (proxyRes, req, res) => {
      // Rewrite the Location header to point to your frontend's login page
      if (proxyRes.headers.location) {
        // Replace the backend's domain/port with your frontend's
        const correctedRedirect = proxyRes.headers.location.replace(
          'http://localhost:9090', 
          'http://localhost:3000'
        );
        proxyRes.headers.location = correctedRedirect;
      }
    }
  }]
}

This will ensure any redirect from the backend gets rewritten to use your frontend's 3000 port, so your browser loads your React login page instead of the backend's.

Option 2: Return 401 Instead of Redirects for API Requests (Recommended) #

For a more clean, SPA-friendly approach, adjust your Spring Boot configuration to return a 401 Unauthorized status code for API requests instead of a redirect. Then handle the redirect to your React login page on the frontend.

Step 1: Update Spring Security Config #

Modify your Spring Security setup to differentiate between browser requests and API requests:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
  @Override
  protected void configure(HttpSecurity http) throws Exception {
    http
      .authorizeRequests()
        .antMatchers("/api/**").authenticated()
        .and()
      .formLogin()
        .loginPage("/login") // Still redirect browsers to backend login if needed
        .and()
      .exceptionHandling()
        // Return 401 for API requests instead of redirecting
        .defaultAuthenticationEntryPointFor(
          new HttpStatusEntryPoint(HttpStatus.UNAUTHORIZED),
          new AntPathRequestMatcher("/api/**")
        );
  }
}

Step 2: Add a Response Interceptor in React #

Use a library like Axios to catch 401 errors and redirect to your frontend login page:

import axios from 'axios';

// Set up an interceptor to handle 401 responses
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Redirect to your React login route
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

This approach aligns with best practices for decoupled frontend/backend architectures, keeping routing logic where it belongs—on the frontend.

Quick Check #

Double-check that changeOrigin: true is set in your proxy config (you mentioned it already, but it's critical for ensuring the proxy sends the correct Host header to Spring Boot, which can affect redirect generation).

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