DarkSky API未处理拒绝错误求助（ReactJS/Axios/Node.js环境）

Hey there! Let's work through the two API-related problems you're facing with your React travel app—first the sudden Zomato API error (even without code changes), then getting the DarkSky API to work properly.

Fixing the Unexpected Zomato API Error #

Even if you haven't touched your code, APIs can break for external reasons. Here are the most common causes to check:

• API Key Issues: Check your browser console for errors like 401 Unauthorized or 403 Forbidden. This usually means your Zomato API key has expired, reached its rate limit, or had its permissions revoked. Head to your Zomato developer dashboard to verify the key's status and renew it if needed.
• Endpoint Changes: APIs often get updated—Zomato might have deprecated the endpoint you're using (e.g., switching from v1 to v2 of their API). Compare your request URL against the latest Zomato API documentation to ensure it matches the current required format.
• CORS Policy Updates: If you see a CORS-related error in the console, Zomato may have adjusted their cross-origin resource sharing rules. Try testing the API request via a backend proxy instead of calling it directly from your React frontend, or check if they offer CORS whitelisting for your domain.
• Invalid Lat/Lng Format: Double-check that the latitude/longitude values you're passing to Zomato are valid numeric values (not strings or malformed coordinates). Sometimes browser geolocation APIs can return unexpected formats if the user's device has location settings issues.

Getting DarkSky API to Work #

DarkSky has some specific requirements that are easy to miss. Let's walk through key checks:

• Confirm API Key & Endpoint: DarkSky's request format is strict. Make sure your request URL follows this structure:

  https://api.darksky.net/forecast/YOUR_API_KEY/[LATITUDE],[LONGITUDE]
  

  Replace YOUR_API_KEY with your valid DarkSky key, and ensure [LATITUDE] and [LONGITUDE] are comma-separated numbers (no spaces or extra characters).
• CORS Limitations: DarkSky typically doesn't allow direct frontend requests (to protect API keys from exposure). If you're seeing CORS errors, set up a simple backend proxy (using Node.js, Express, etc.) to forward the request from your React app to the DarkSky API. This keeps your key secure and avoids cross-origin issues.
• HTTPS Requirement: DarkSky requires all requests to use HTTPS. If you're testing locally with HTTP, your request will be blocked. Use a HTTPS-enabled local dev server (like react-scripts start with HTTPS=true) or proxy through your backend.
• Response Parsing: Ensure you're correctly parsing the JSON response from DarkSky. For example, with fetch:

  fetch(`https://api.darksky.net/forecast/${process.env.REACT_APP_DARKSKY_KEY}/${lat},${lng}`)
    .then(response => {
      if (!response.ok) throw new Error('API request failed');
      return response.json(); // Don't forget this step!
    })
    .then(data => {
      // Handle weather data here
    })
    .catch(error => console.error('DarkSky Error:', error));
  

• Rate Limits & Key Validity: Just like Zomato, verify your DarkSky key hasn't expired or hit its request limit in your developer dashboard.

General Debugging Tips #

• Check Console Errors First: The exact error message (e.g., status code, CORS message) will point you directly to the problem. Don't skip this step!
• Test APIs Directly: Use tools like Postman or Insomnia to send requests to Zomato/DarkSky without your React code. If the request works here, the issue is in your frontend code; if not, it's an API/key issue.
• Verify Environment Variables: If you're storing API keys in environment variables (e.g., REACT_APP_ZOMATO_KEY), confirm they're correctly set in your development and production environments—missing or incorrect variables are a common culprit.

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