Proxy fetch always returns 404 Not Found

Support
, ,
1

I’ve been trying to fix this issue and checked over several posts and AI chat without luck.
My netlify site name → https://resplendent-daffodil-836a28.netlify.app/

I created a netlify functions script under netlify/functions directory with name download.js

// netlify/functions/download.js

const fetch = require('node-fetch');

exports.handler = async (event) => {
  // Set CORS headers so that your function can be called from the browser.
  const headers = {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
  };

  try {
    const { url } = JSON.parse(event.body);

    const response = await fetch(
      'https://downloadapi.com/v1/api/',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-rapidapi-key': process.env.RAPID_API_KEY, // API key is now securely loaded
          'x-rapidapi-host': 'someapi.com',
        },
        body: JSON.stringify({ url }),
      }
    );

    const data = await response.json();

    if (data.error) {
      return {
        statusCode: 400,
        headers,
        body: JSON.stringify({ error: 'URL invalid or not supported' }),
      };
    }

    return {
      statusCode: 200,
      headers,
      body: JSON.stringify(data),
    };

  } catch (error) {
    return {
      statusCode: 500,
      headers,
      body: JSON.stringify({ error: error.message }),
    };
  }
};

now my App.js would call this like :

const handleDownload = async () => {
    setLoading(true);
    setError(null);
    try {
      // Call your Netlify Function endpoint
      const response = await fetch('/.netlify/functions/download', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url }),
      });
      const data = await response.json();
  
      if (data.error) {
        throw new Error('URL invalid or not supported');
      }
      setVideoData(data);
      setShowDownloadView(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

netlify.toml configured → 

[build]
  functions = "netlify/functions"

I get an error when I trigger this proxy endpoint:
Failed to load resource: the server responded with a status of 404 () /.netlify/functions/download

I have configured the environment variables and project structure is verified:

image
image337×657 15.6 KB

Also note that this issue is there both in my local and in deployment. Below is my package.json for reference:

{
  "name": "j2download-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@shadcn/ui": "^0.0.4",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@testing-library/user-event": "^13.5.0",
    "dotenv": "^16.4.7",
    "lucide-react": "^0.483.0",
    "node-fetch": "^2.7.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "^5.0.1",
    "tailwindcss": "^4.0.15",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Appreciate if someone can provide any insights into the potential issue behind this and if I missed anything here.

2

You need git deploys for Functions. Manual deploys won’t work.

3

@hrishikesh
Thank you! that worked!
Deployed from bitbucket directly and it started resolving.
How do I make netlify functions work from my local ? It’s still 404 on my local

4

You need to use Netlify CLI for that.