nuxt app deployed to Netlify: fetch to api working locally, but not on deployed site: getting a 404

Question

I have a Nuxt.js app that I'm trying to deploy to Netlify - and everything works on my local machine, but the fetch request to the api returns a 404 when it's deployed to Netlify. I don't know how to make that server route available to my client when it's deployed.

the fetch request in my api-client.js file looks like this:

 async fetchInfo(state) {
    let response = await fetch(`/api/info/${state}`);
      let data = await response.json();
      return data;
  }

and the api looks like this (in api/index.js file):

const rp = require('request-promise');
const apiKey = process.env.POLICY_API_KEY;

export default function (req, res, next) {
  if (req.url.includes("/info")) {
    let stateAbbr = req.originalUrl.slice(-2);
    rp({
      uri: `https://third-party-api-here.com/states/${stateAbbr}/`,
      method: 'GET',
      headers: { 
        'token': apiKey,
      },
      json: true
    }).then(function success(response) {
        if (response) {
          res.setHeader('Content-Type', 'application/json');
          res.end(JSON.stringify(response));
          return;
        }
    }).catch(function error(response) {
        console.log('error', response.error);
    });
    return;
  }
  next();
}

I think this might have something to do with CORS? I'm getting this error in the browser when I try to hit that route in the deployed app: GET https://my-app-name.netlify.app/api/info/MN 404 SyntaxError: Unexpected token < in JSON at position 0

Netlify serves static files only - it does not run backends unless you use their serverless Lambda functions (which you obviously do not). You may need to deploy your application on Heroku or on your own VPS if you want to run backend/server-side code. — IVO GELOV
– IVO GELOV, Commented Jul 11, 2022 at 14:52
True, be sure that you do not need a server for your usage. You have one when working locally (for Hot Module Reload etc), but Netlify does not allow for such thing. — kissu
– kissu, Commented Jul 11, 2022 at 15:45

kissu · Accepted Answer · 2022-07-12 09:43:51Z

2

As mentioned in the comment above, you need to have a Node.js of some sort.

Hence, hosting on Heroku fixed OP's issue (Netlify is only for static files).

answered Jul 12, 2022 at 9:43

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thor · Accepted Answer · 2023-08-01 11:53:47Z

1

You can have netlify host your /server/api endpoints if you specify in your environment variables NITRO_PRESET=netlify-edge, and use nuxt build to build your deployment. It will then create edge functions that handles your /server/api endpoints. I think this used to be the default until recently with nuxt / nitro, but I believed it changes recently, possibly in nitropack v2.4.0(?) to default to NITRO_PRESET=netlify, where I believe it doesn't create functions for the /server/api endpoints.

answered Aug 1, 2023 at 11:53

Thor

7477 silver badges15 bronze badges

Collectives™ on Stack Overflow

nuxt app deployed to Netlify: fetch to api working locally, but not on deployed site: getting a 404

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related