After deploying my NuxtJS 2 app on Vercel and adding serverMiddleware to include an api folder in the nuxt.config.js file, everything was working smoothly. However, when I tried making an api call on my preview environment, I encountered an error: POST http://localhost:3000/api/subscribe net::ERR_BLOCKED_BY_CLIENT.
Even though it mentions localhost, I attempted to resolve the issue by adding a vercel.json with the appropriate configuration, but that didn't work on Vercel. How can I make api calls without being blocked by the client?
P.S: Below is my client side code for reference:
<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;
}
}
(...)