部署Netlify后NewsReaderApp无法通过NewsAPI获取数据问题排查求助

Let's break down the issues you're facing and fix them step by step:

1. The Core Issue: NewsAPI Free Tier Browser Restrictions #

This is almost certainly why your deployed app isn't loading news. The NewsAPI free plan does NOT allow direct client-side (browser) requests—it only permits requests from localhost or server-side environments. When you deploy to Netlify, the requests are sent from your users' browsers, which NewsAPI blocks (you'll likely see a 403 Forbidden or CORS error in the browser console).

Fix: Use Netlify Functions as a Proxy #

To get around this, we'll create a serverless function to handle the API request securely, so your API key stays hidden and complies with NewsAPI's rules:

1. Create a netlify/functions folder in your project root, then add a file named fetchNews.js:

exports.handler = async (event) => {
  const { country, category, page, pageSize } = event.queryStringParameters;
  const API_KEY = process.env.NEWS_API_KEY; // Store this in Netlify env vars
  const url = `https://newsapi.org/v2/top-headlines?country=${country}&category=${category}&apiKey=${API_KEY}&page=${page}&pageSize=${pageSize}`;

  try {
    const response = await fetch(url);
    const data = await response.json();
    return {
      statusCode: 200,
      body: JSON.stringify(data)
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message })
    };
  }
};

2. Update your News.js to call this proxy instead of the direct NewsAPI URL:

   • In updateNews:

     const url = `/.netlify/functions/fetchNews?country=${props.country}&category=${props.category}&page=${page}&pageSize=${props.pageSize || "12"}`;
     

   • In fetchMoreData:

     let url = `/.netlify/functions/fetchNews?country=${props.country || "in"}&category=${props.category || "general"}&page=${page+1}&pageSize=${props.pageSize}`;
     

3. Add your NewsAPI key to Netlify:

   • Go to your Netlify project → Site settings → Environment variables
   • Add a variable named NEWS_API_KEY with your actual API key as the value.

2. Why You're Not Seeing console.log(parsedData) Locally #

Looking at your code, the console.log(parsedData) in the updateNews function is commented out (//console.log(parsedData)). That's why you don't see it when the component initializes. The only active console.log is in fetchMoreData, which only runs when you scroll to trigger infinite loading.

Fix: Uncomment the Log in updateNews #

Simply remove the // to see the initial API response:

let parsedData = await data.json();
props.setProgress(50);
console.log(parsedData); // Uncomment this line

3. Additional Debugging Steps #

• Check the Browser Console on Netlify: Open your deployed site, hit F12, and check the Console/Network tabs. Look for API request errors (like 403, CORS, or invalid key) to confirm the root cause.
• Verify Request Parameters: Make sure props.country and props.category are passing valid values (not empty strings) to avoid malformed API requests.
• Test the Proxy Locally: Install the Netlify CLI (npm install -g netlify-cli), then run netlify dev to test the function locally before deploying.

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