0

I am using NuxtJS 2, I deployed my app on Vercel and everything has been working fine. The things changed when I decided to add serverMiddleware, I created a api folder, I added the following to the nuxt.config.js file:

serverMiddleware: [{
  path: '/api',
  handler: '~/api/newsletter.ts'
}],

And everything works just fine locally. As expected. I released it to my preview environment, added the corresponding environment variables, but when I try to do an api call I get the following error: POST http://localhost:3000/api/subscribe net::ERR_BLOCKED_BY_CLIENT in the release environment.

I am aware it says local host. I tried adding a vercel.json with the corresponding configuration, but it won't work in Vercel. How do I get to use api call without it being denied by the client?

P.S: This is my client side code:

<script>
(...)
    async subscribe () {
      this.form.sending = true;
      this.form.errors.push('Sending...');

      try {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const response = await this.$axios.$post('/api/subscribe', { email: this.form.email });
        this.form.success = true;
        this.resetFormEmail();
        this.form.errors.push('Thanks for subscribing!');
      } catch (error) {
        this.form.errors.push(`${error.response.data.title}`);
      } finally {
        this.closeFormStatus();
        this.form.sending = false;
      }
    }
(...)
Vivallo04
  • 24
  • 3

1 Answers1

0

If you are sure your app is working well on your local, then it might be cors issue. Try this: https://vercel.com/guides/how-to-enable-cors

Louis Young
  • 74
  • 4
  • I tried configuring Cors manually with Express, or Axios, and neither of them are working. I think the issue is related to it though. – Vivallo04 Jul 12 '23 at 19:50