Service Worker导致React项目REST接口请求失效问题求助

Hey there! I’ve run into similar hiccups when deploying React apps alongside Java backends, so let’s work through this step by step.

1. Check if Service Worker is Caching API Requests (or Causing Conflicts) #

CRA’s default Service Worker is set up to cache static assets, but sometimes if your API routes match patterns the SW is watching, it might intercept those requests and serve stale cached responses—even if you’re hitting the URL directly.

• First, try disabling the Service Worker temporarily to test:
  • Open your browser’s DevTools > Application > Service Workers
  • Check the "Bypass for network" option, then refresh the page and try your API request again
• If that fixes it, you’ll need to adjust your Service Worker’s scope to exclude API routes. For CRA, you can customize the SW using Workbox (it’s what CRA uses under the hood):
  • Create a src/service-worker.js file if you don’t have one already
  • Add rules to skip caching your /rest/* routes:

    import { registerRoute } from 'workbox-routing';
    import { StaleWhileRevalidate } from 'workbox-strategies';
    
    // Cache static assets but exclude API routes
    registerRoute(
      ({url}) => !url.pathname.startsWith('/rest/'),
      new StaleWhileRevalidate()
    );
    

  • Update your index.js to register this custom SW instead of the default:

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
          .then(registration => console.log('SW registered: ', registration))
          .catch(err => console.log('SW registration failed: ', err));
      });
    }
    

2. Verify Route Conflicts Between React and Java Backend #

Since your React app lives at the root of the Java app, there’s a chance React’s client-side routing is intercepting requests that should go to the backend. For example, BrowserRouter might catch /rest/myservice/123 and try to render a frontend route instead of letting it reach the Java backend.

• Test accessing your API URL in an incognito window (this avoids cached SW or frontend state)
• If incognito still fails, check your Java backend’s config (like web.xml for traditional apps or Spring Boot route mappings) to ensure /rest/* routes are being handled correctly. Look for filters or dispatchers that might be blocking these requests.
• If incognito works, adjust your React Router setup to exclude API routes. For example:

  <BrowserRouter>
    <Switch>
      {/* Redirect API requests to the backend instead of handling them client-side */}
      <Route path="/rest" component={() => {
        window.location.href = window.location.pathname;
        return null;
      }} />
      {/* Your regular frontend routes go here */}
      <Route path="/" component={Home} />
    </Switch>
  </BrowserRouter>
  

3. Check Java Backend Service Status & Configuration #

Since even direct browser access to the REST URL gives no response, the issue might be entirely on the backend side:

• Confirm your Java application server is running and listening on the correct port
• Check server logs for errors (like database connection issues, missing dependencies, or exceptions thrown when handling /rest/* requests)
• Verify the backend’s context path hasn’t changed. If you deployed the Java app with a context path (e.g., /myapp), your API requests would need to be /myapp/rest/myservice/123—which breaks relative paths if the context path was added recently.
• Test the API directly with a tool like curl to bypass the React app:

  curl http://localhost:8080/rest/myservice/123
  

4. Confirm CRA’s homepage Configuration #

If you set a homepage field in your package.json, it might alter the base URL for relative requests. For root deployment, this should be set correctly.

• Open your package.json and check the homepage value. If it’s set to a subpath, try changing it to "homepage": "/" or removing it entirely (CRA defaults to root if not set)
• Rebuild your React app and redeploy it to the Java server after making this change

Let me know if any of these steps help narrow down the issue!

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