N
Nuxt•2w ago
Nangman02

preflight with 204 no content

Hello everyone. Due to unfortunate downsizing, I must handle the project with 2 Vue clients. I have never done any client development before, but one seems to use Nuxt 2 (A), and the other uses Vite(B). They are used in mixed ways. However, (A) mostly serves users who are not signed in, and (B) serves users who are signed in with the app.domain. The production service is working fine, but I am trying to restore the dev server. Fortunately, as the codebase is structured with dockers, I at least succeeded in making them run. However, I am having a hard time calling backend APIs from the client apps. There is an API called with "https://api.localdomain/latest/user/login" It works fine when directly accessed with the browser or the cURL, which returns the correct headers. However, when I access it through the frontend app, the preflight fails with 204 no content, which includes a wildcard('*') for the access-control-allow-origin header, and the subsequent main request fails because of CORS failure. Other GET requests with the same /latest path from the client seem to get 200 fine. I reconstructed the preflight request, but it works perfectly independently, so it doesn't seem to be the backend problem. I am guessing something Nuxt-related is intercepting the request, but I just can't find what is actually happening. I don't have anywhere else to ask, so I am uploading this post. Please forgive me if I am asking a stupid question.
4 Replies
kapa.ai
kapa.ai•2w ago
Hi @Nangman02. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your CORS issue with Nuxt: 1. CORS Handling: Nuxt provides built-in CORS handling capabilities. You might want to check your Nuxt configuration to ensure CORS is properly set up. The handleCors function can be used to handle CORS for incoming requests. Here's an example of how you can set it up: 
const app = createApp();
const router = createRouter();
router.use('/',
  defineEventHandler(async (event) => {
      const didHandleCors = handleCors(event, {
        origin: '*',
        preflight: {
         statusCode: 204,
        },
     methods: '*',
   });
   if (didHandleCors) {
     return;
   }
   // Your code here
 })
);
const app = createApp();
const router = createRouter();
router.use('/',
  defineEventHandler(async (event) => {
      const didHandleCors = handleCors(event, {
        origin: '*',
        preflight: {
         statusCode: 204,
        },
     methods: '*',
   });
   if (didHandleCors) {
     return;
   }
   // Your code here
 })
);
This setup allows you to handle CORS preflight requests with a 204 status code, which matches your current situation. H3 Utils Documentation 2. Cross-Origin Prefetch: If you're using Nuxt 3, you might want to consider enabling cross-origin prefetch. This can be done by adding the following to your nuxt.config.ts: 
export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true
  }
})
export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true
  }
})
This enables cross-origin prefetch using the Speculation Rules API. Nuxt Documentation on Experimental Features 3. Server Configuration: Since you mentioned using Docker and a production setup that works fine, it's worth checking your development server configuration. Ensure that your Nginx (or whatever server you're using) is properly configured to handle CORS in the development environment. The Nginx configuration you provided in the knowledge sources looks good, but double-check that it's being applied correctly in your development setup. 4. Nuxt Version Differences: You mentioned using both Nuxt 2 and Vite. Be aware that there might be differences in how CORS is handled between these versions. Ensure you're applying the correct CORS configuration for each version. 5. Backend CORS Configuration: Although you mentioned that the backend seems to be working correctly when accessed directly, it's worth double-checking the CORS configuration on the backend side as well. The wildcard ('*') for the Access-Control-Allow-Origin header is generally not recommended for production use, especially if you're dealing with authenticated requests. 6. Debugging: To further debug this issue, you might want to use browser developer tools to inspect the network requests and responses in detail. Pay attention to any differences between the successful direct requests and the failing requests through your Nuxt application. If these suggestions don't resolve your issue, you might need to provide more detailed information about your specific Nuxt configuration and the exact error messages you're seeing in the browser console. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@528227637496119316> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
manniL
manniL•2w ago
@Nangman02 since Nuxt 3.15 you need to set a list of allowed hosts for dev (this was to close a security vulnerability) See e.g. https://github.com/nuxt/nuxt/issues/30783
GitHub
HMR broken · Issue #30783 · nuxt/nuxt
Environment Operating System: Darwin Node Version: v20.18.1 Nuxt Version: 3.15.3 CLI Version: 3.20.0 Nitro Version: 2.10.4 Package Manager: [email protected] Builder: - User Config: extends, modules, $de...
manniL
manniL•2w ago

Did you find this page helpful?