Nuxt•2mo ago

$fetch from client vs from server

I've got a problem with $fetch in Nuxt.js with ASP.NET. When i use $fetch (method: 'delete' straight straight from client it ends with the error "BLOCKED_BY_CLIENT" but when I send api request to the nitro endpoint and then request to ASP.NET it works. Could someone explain to me why?

7 Replies

kapa.ai•2mo ago

Hi @Uzyxen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with $fetch in Nuxt.js when making requests to an ASP.NET backend is related to how Nuxt handles server-side and client-side requests differently. Let me explain why this is happening and provide some context. When you use $fetch directly from the client-side (browser) to make a DELETE request to your ASP.NET backend, it's likely being blocked by CORS (Cross-Origin Resource Sharing) policies or potentially by a browser extension or security setting. This is why you're seeing the "BLOCKED_BY_CLIENT" error. However, when you route the request through a Nitro endpoint (server-side) first, it works because: 1. Server-side requests in Nuxt bypass CORS restrictions. 2. Nuxt's server-side environment can forward necessary headers and cookies that might be required for authentication or other purposes. Nuxt Documentation (https://nuxt.com/docs/getting-started/data-fetching#passing-headers-and-cookies) explains this behavior: "When we call $fetch in the browser, user headers like cookie will be directly sent to the API. But during server-side-rendering, since the $fetch request takes place 'internally' within the server, it doesn't include the user's browser cookies, nor does it pass on cookies from the fetch response." To solve this issue, you have a few options: 1. Continue using the Nitro endpoint as an intermediary for your API calls. This is a common pattern known as a Backend for Frontend (BFF). 2. Properly configure CORS on your ASP.NET backend to allow requests from your Nuxt.js frontend. 3. Use useRequestFetch (https://nuxt.com/docs/guide/directory-structure/server#forwarding-context-headers) to forward the request context and headers when making fetch requests in server routes:

const { data } = await useAsyncData('item', () => 
  useRequestFetch()('/api/item')
)

const { data } = await useAsyncData('item', () => 
  useRequestFetch()('/api/item')
)

UzyxenOP•2mo ago

kapa.ai•2mo ago

This approach ensures that the necessary headers and context are forwarded, which can help resolve CORS and authentication issues. Remember, when dealing with sensitive operations like DELETE requests, it's often safer to route them through your server-side API to maintain better control over authentication and authorization. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@361925793397473281> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

UzyxenOP•2mo ago

@kapa.ai but I allowed all methods and headers: builder.Services.AddCors(options => { options.AddPolicy("AllowNuxtApp", builder => builder .WithOrigins("http://localhost:3000") // Nuxt app URL .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials()); });

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the CORS configuration you've provided for your ASP.NET backend, it appears that you've set up a policy to allow requests from your Nuxt application. However, the issue you're experiencing might be related to how the CORS policy is applied or other factors. Let's explore this further: 1. CORS Configuration: Your CORS setup looks correct for allowing requests from your Nuxt app running on <http://localhost:3000.> You've allowed any method, any header, and credentials. 2. Application of CORS Policy: Ensure that you're applying this CORS policy in your ASP.NET application. You should have something like this in your Configure method:

   app.UseCors("AllowNuxtApp");

   app.UseCors("AllowNuxtApp");

Make sure this is placed in the correct order in your middleware pipeline. 3. Client-side vs. Server-side requests: As mentioned in the Nuxt documentation (https://nuxt.com/docs/getting-started/data-fetching#passing-headers-and-cookies), there's a difference in how $fetch behaves on the client-side versus the server-side. On the client-side, it includes user headers like cookies, while on the server-side, it doesn't. 4. Browser Extensions: The "BLOCKED_BY_CLIENT" error could also be caused by browser extensions or security settings. Try disabling extensions or testing in an incognito/private browsing window. 5. Preflight Requests: For DELETE methods, browsers send a preflight OPTIONS request. Ensure your server is correctly handling these preflight requests. 6. Credentials: Since you're using AllowCredentials(), make sure your Nuxt app is configured to send credentials with the request. In your $fetch call, you might need to include:

   $fetch('/your-api-endpoint', {
     method: 'DELETE',
     credentials: 'include'
   })

   $fetch('/your-api-endpoint', {
     method: 'DELETE',
     credentials: 'include'
   })

7. Server-side Proxy: If the issue persists, you might want to consider using a server-side proxy in Nuxt. This approach, as mentioned in a Stack Overflow answer (https://stackoverflow.com/questions/78633717), can help bypass CORS issues: "What you can do instead is proxy those requests through your own server. So essentially you'd make AJAX requests to API endpoints on your own server that you control, and the server-side code in those endpoints would make HTTP requests to the external service." If after checking these points the issue still persists, you might need to investigate further by examining the network requests in your browser's developer tools and checking the server logs for any additional error information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@361925793397473281> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

$fetch from client vs from server