React-Redux注册功能无法与API正常通信及相关问题咨询

Let's break down your two issues one by one— I've dealt with both plenty while building React apps, so here's what you can try:

First, it’s smart to distinguish between warnings that are just noise vs. ones that hint at potential bugs (like unused variables or deprecated APIs). For the non-important ones, you can filter them out directly in your Webpack setup:

• If you’re using a custom Webpack config (not Create React App), add a warningsFilter to target specific warning patterns:

  module.exports = {
    // ... your existing config
    stats: {
      // Replace these regex patterns with the warnings you want to ignore
      warningsFilter: [
        /Critical dependency: the request of a dependency is an expression/,
        /export 'default' (imported as 'SomeModule') was not found in 'some-module'/
      ]
    }
  };
  

• If you’re using Create React App without ejecting, use a tool like craco to override the default config. Install it, then create a craco.config.js file with the same stats.warningsFilter setup above.
• Quick development hack: Set the CI environment variable to true (e.g., CI=true npm start)— this disables most non-essential warnings, but only use this if you’ve already confirmed the warnings are safe to ignore.

A quick note: Always double-check that the warnings you’re ignoring aren’t hiding real issues (like missing dependencies or incorrect module imports) before filtering them out.

This is almost always a configuration or connectivity issue— let’s walk through the most common fixes:

• Verify your mock backend is running: Check the terminal where you started the backend— you should see a message confirming it’s listening on a specific port (e.g., json-server running at http://localhost:3001). If it’s not running, start it first!
• Check your frontend API URL: Make sure the URL your React app uses matches exactly where the mock backend serves data. For example, if your backend is on port 3001, your fetch call should look like:

  fetch('http://localhost:3001/api/posts')
    .then(res => res.json())
    .then(data => console.log(data));
  

  Test this URL directly in your browser— if it doesn’t return JSON, the backend path or port is wrong.
• Fix CORS issues: If your frontend (usually port 3000) and backend are on different ports, ensure your mock backend allows cross-origin requests. Tools like json-server handle this automatically, but if you built a custom mock server, add the CORS header to your responses:

  // Example for a Node/Express mock server
  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    next();
  });
  

• Inspect the Network tab: Open your browser’s DevTools > Network tab, trigger the API call, and check the request details. Look for:
  • Status codes (404 means the path is wrong, 500 means the backend has an error, 403 means CORS is blocked)
  • The "Request URL" to confirm it’s correct
  • The "Response" tab to see if the backend is sending error messages
• Check environment variables: If you’re using an environment variable for the API URL (like REACT_APP_API_URL), make sure it’s correctly defined in your .env file and that you’re using it properly in code (e.g., process.env.REACT_APP_API_URL + '/posts').

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