Nuxt•3w ago

BaseUrl configuration problem using proxy

Hi! I am testing with a project in Nuxt 3 with the simple configuration only including the baseUrl inside the app. But it is giving me problems when I duplicate this baseUrl when we use the following proxy to run the web without VPN. When I run the web without JS is entering me fine, if I run the JS I duplicate the baseUrl and I get a 404. Could someone help me, because I can not see why I get that error? --------------- This is the proxy we have --------------- location /apipre/front/mejorac { proxy_pass http://10.239.229.24:3011; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods "GET, POST, PUT; DELETE, OPTIONS"; add_header Access-Control-Allow-Headers "Content-Type, Authorization"; chunked_transfer_encoding off; proxy_buffering off; proxy_connect_timeout 300; proxy_send_timeout 300; proxy_read_timeout 300; send_timeout 300; } y con este nuxt.config export default defineNuxtConfig({ compatibilityDate: '2024-04-03', devtools: { enabled: false }, app: { baseURL: '/apipre/front/mejorac', // buildAssetsDir: '/_nuxt/', }, }) Thanks!

19 Replies

kapa.ai•3w ago

Hi @Jesús Serrano. 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 your question and the available knowledge sources, it seems you're experiencing an issue with the baseURL configuration in your Nuxt 3 project when using a proxy. Let's address this problem step by step. 1. First, your nuxt.config.js configuration for the baseURL looks correct:

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
  app: {
    baseURL: '/apipre/front/mejorac',
  },
})

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
  app: {
    baseURL: '/apipre/front/mejorac',
  },
})

This configuration should set the base URL for your Nuxt application to /apipre/front/mejorac. 2. The issue you're experiencing with the duplication of the baseURL when JavaScript is enabled might be related to how Nuxt handles the baseURL in different environments. 3. To address this, you might need to ensure that your server-side configuration (in this case, your proxy) is correctly set up to work with the baseURL you've defined in your Nuxt config. 4. One potential solution, as suggested in a Stack Overflow post (https://stackoverflow.com/questions/77549265), is to modify your proxy configuration to include the baseURL in both the ProxyPass and ProxyPassReverse directives. Although your proxy configuration is different, you might try adapting this concept:

location /apipre/front/mejorac {
    proxy_pass <http://10.239.229.24:3011/apipre/front/mejorac;>
    # ... (rest of your existing configuration)
}

location /apipre/front/mejorac {
    proxy_pass <http://10.239.229.24:3011/apipre/front/mejorac;>
    # ... (rest of your existing configuration)
}

5. Additionally, make sure that your Nuxt application is actually serving content from the /apipre/front/mejorac path on your backend server (http://10.239.229.24:3011). 6. If the problem persists, you might want to check how the baseURL is being used in your Nuxt application. According to the Nuxt documentation on runtime config (https://nuxt.com/docs/api/composables/use-runtime-config#environment-variables), you can access the baseURL in your application using:

const config = useRuntimeConfig()
const baseURL = config.app.baseURL

const config = useRuntimeConfig()
const baseURL = config.app.baseURL

Ensure that this value is being used correctly throughout your application. 7. Lastly, if you're still facing issues, you might want to consider using the NUXT_APP_BASE_URL environment variable to set the baseURL at runtime, as mentioned in the Nuxt documentation (https://nuxt.com/docs/api/composables/use-runtime-config#environment-variables). If these suggestions don't resolve your issue, you might need to provide more details about your specific setup, including how you're deploying your Nuxt application and any other relevant configuration details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Jesús SerranoOP•3w ago

@kapa.ai Could it be from the configuration made in the proxy or is it more likely to be a project problem?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information provided in your previous question and this follow-up, it's possible that the issue could stem from either the proxy configuration or the project setup. However, given the details you've shared, it seems more likely that the problem is related to the interaction between your proxy configuration and your Nuxt project settings. Here's why: 1. Proxy Configuration: The proxy setup you provided in your initial question looks generally correct, but it might not be fully aligned with your Nuxt application's baseURL setting. As suggested in a Stack Overflow post (https://stackoverflow.com/questions/77549265), the proxy configuration might need to be adjusted to properly handle the baseURL you've set in your Nuxt config. 2. Project Configuration: Your Nuxt project configuration (nuxt.config.js) appears to be correctly set up with the baseURL. However, the issue you're experiencing - where the baseURL is duplicated when JavaScript is enabled - suggests that there might be a mismatch in how the baseURL is being handled between server-side and client-side rendering. To troubleshoot this, you could try the following: 1. Modify your proxy configuration to explicitly include the baseURL in the proxy_pass directive, as mentioned earlier:

   location /apipre/front/mejorac {
       proxy_pass <http://10.239.229.24:3011/apipre/front/mejorac;>
       # ... (rest of your existing configuration)
   }

   location /apipre/front/mejorac {
       proxy_pass <http://10.239.229.24:3011/apipre/front/mejorac;>
       # ... (rest of your existing configuration)
   }

2. Double-check that your Nuxt application on the backend server (http://10.239.229.24:3011) is actually serving content from the /apipre/front/mejorac path. 3. Verify how the baseURL is being used within your Nuxt application. As per the Nuxt documentation (https://nuxt.com/docs/api/composables/use-runtime-config#app-namespace), you can access it using:

   const config = useRuntimeConfig()
   const baseURL = config.app.baseURL

   const config = useRuntimeConfig()
   const baseURL = config.app.baseURL

Ensure this value is being used consistently throughout your application. 4. If the issue persists, you might want to try setting the baseURL using an environment variable as suggested in the Nuxt documentation (https://nuxt.com/docs/api/composables/use-runtime-config#environment-variables):

   NUXT_APP_BASE_URL=/apipre/front/mejorac node .output/server/index.mjs

   NUXT_APP_BASE_URL=/apipre/front/mejorac node .output/server/index.mjs

While it's more likely that the issue is related to the interaction between your proxy and Nuxt configurations, without more detailed information about your project structure and deployment process, it's difficult to rule out a project-specific problem entirely. If these suggestions don't resolve the issue, you might need to provide more details about your project setup and how you're deploying your Nuxt application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Jesús SerranoOP•3w ago

@kapa.ai the url it generates is like the following taking into account the proxy added and the nuxt configuration above. This url should be the correct one https://www.sspa.juntadeandalucia.es/agenciadecalidadsanitaria/apipre/front/mejorac/version and this is the url that https://www.sspa.juntadeandalucia.es/apipre/front/mejorac/agenciadecalidadsanitaria/apipre/front/mejorac/version generates.

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the URL examples you've provided, it appears that the baseURL is indeed being duplicated in the generated URL. This is likely due to a misconfiguration in how Nuxt is handling the baseURL in combination with your proxy setup. Let's analyze this issue and suggest a potential solution. The correct URL structure you're aiming for is: <https://www.sspa.juntadeandalucia.es/agenciadecalidadsanitaria/apipre/front/mejorac/version> However, you're getting: <https://www.sspa.juntadeandalucia.es/apipre/front/mejorac/agenciadecalidadsanitaria/apipre/front/mejorac/version> This duplication suggests that Nuxt is appending the baseURL to an already complete URL, which includes the baseURL path. To resolve this, you might need to adjust your Nuxt configuration. Instead of setting the baseURL in the app object, you could try using the router configuration. Here's a suggested modification to your nuxt.config.js:

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
  router: {
    base: '/agenciadecalidadsanitaria/apipre/front/mejorac/'
  }
})

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
  router: {
    base: '/agenciadecalidadsanitaria/apipre/front/mejorac/'
  }
})

This configuration tells Nuxt to use this base path for all routes, which should prevent the duplication you're experiencing. Additionally, you might need to adjust your proxy configuration to match this new setup. Based on the YouTube video on Nuxt 3 proxying (https://www.youtube.com/watch?v=J4E5uYz5AY8), you could consider using a Nitro proxy endpoint for more control over how requests are handled. Here's an example of how you might set this up:

// server/api/[...].ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig()
  const target = '<https://www.sspa.juntadeandalucia.es'>
  const url = new URL(event.node.req.url, target)
  url.pathname = url.pathname.replace(/^\/api/, '')
  
  return proxyRequest(event, url.toString())
})

// server/api/[...].ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig()
  const target = '<https://www.sspa.juntadeandalucia.es'>
  const url = new URL(event.node.req.url, target)
  url.pathname = url.pathname.replace(/^\/api/, '')
  
  return proxyRequest(event, url.toString())
})

This setup would allow you to have more fine-grained control over how URLs are constructed and proxied. If these changes don't resolve the issue, you might need to investigate further how your application is constructing URLs. It's possible that there's some client-side code that's incorrectly appending the baseURL to already complete URLs. Remember to test these changes thoroughly in your development environment before deploying to production. If the problem persists, you may need to provide more details about your application's structure and how you're generating URLs within your components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Jesús SerranoOP•3w ago

@kapa.ai Why if I delete the duplicate from the path I get the following error before pressing enter or anything else? [Vue Router warns:] No match found for location with path “/index”. Having the configuration with the router: { base: '/agenciadecalidadsanitaria/apipre/front/mejorac/' }

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error you're encountering, "No match found for location with path "/index"," is likely related to how Vue Router is handling the routes in your Nuxt application. This issue can occur when the router is trying to navigate to a path that doesn't match any of your defined routes. Let's analyze this based on the information you've provided and the Nuxt documentation. 1. First, it's important to note that when you set the router.base in your Nuxt configuration, all your routes should be relative to this base path. As per the Nuxt documentation on router options (https://nuxt.com/docs/api/nuxt-config#router), the base setting is used to set the base URL of the application. 2. The error suggests that the router is trying to navigate to "/index", which doesn't include your specified base path. This could happen if there's some code in your application that's trying to navigate to the root path without considering the base URL. 3. To address this issue, you might need to ensure that all your internal links and navigation methods in your Nuxt application are using the correct relative paths. For example, instead of linking to "/", you should link to "./". 4. Additionally, you can use the NuxtLink component for internal navigation, which should automatically handle the base path. As mentioned in the Nuxt documentation on custom routing (https://nuxt.com/docs/guide/recipes/custom-routing), NuxtLink is the preferred way to create links in your Nuxt application. 5. If you're using programmatic navigation (like router.push()), make sure you're using relative paths or the route name instead of absolute paths. 6. You might also want to check if you have a catch-all route or a 404 page defined in your Nuxt application. This can help handle cases where a route doesn't match any of your defined pages. 7. Lastly, as suggested in a GitHub issue about NuxtLink and external paths (https://github.com/nuxt/nuxt/issues/29313), if you're using NuxtLink for external paths on the same domain, you might need to add the external prop to prevent Nuxt from trying to handle it as an internal route. If the problem persists after checking these points, you might need to review your entire routing setup and ensure that all your pages and routes are correctly defined relative to your base path. It could also be helpful to use Nuxt's built-in devtools or Vue DevTools to inspect your routes and navigation behavior in more detail. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Jesús SerranoOP•3w ago

@kapa.ai Trying in a middleware by taking out by console in process.server it shows me and in process.client it does not show. Could it be that the error is giving it before entering the client? How could I test it?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your question and the information provided in the knowledge sources, it appears you're trying to debug a potential issue with client-side rendering in your Nuxt application. Let's break down your observations and suggest some ways to test and troubleshoot this issue. 1. Server vs. Client Rendering: Your observation that the console log appears in process.server but not in process.client suggests that the code is indeed executing on the server but not on the client. This aligns with Nuxt's universal rendering approach, as described in the Nuxt documentation on universal rendering (https://nuxt.com/docs/guide/concepts/rendering#universal-rendering). 2. Potential Causes: The error you're experiencing might be occurring during the hydration process or before the client-side JavaScript fully initializes. This could prevent your client-side code from executing. 3. Testing and Debugging: a. Use useNuxtApp() to check hydration status: You can use the isHydrating property of useNuxtApp() to determine if the app is currently hydrating. Here's an example from the Nuxt documentation (https://nuxt.com/docs/api/composables/use-nuxt-app#ishydrating):

      const nuxtApp = useNuxtApp()
      if (process.client && !nuxtApp.isHydrating) {
        // Your client-side code here
        console.log('Client-side code executed')
      }

      const nuxtApp = useNuxtApp()
      if (process.client && !nuxtApp.isHydrating) {
        // Your client-side code here
        console.log('Client-side code executed')
      }

b. Use error handling hooks: Implement error handling hooks to catch any errors that might be preventing client-side execution. As mentioned in the Nuxt error handling documentation (https://nuxt.com/docs/getting-started/error-handling), you can use the vue:error hook:

      export default defineNuxtPlugin((nuxtApp) => {
        nuxtApp.hook('vue:error', (error, instance, info) => {
          console.error('Vue error:', error)
        })
      })

      export default defineNuxtPlugin((nuxtApp) => {
        nuxtApp.hook('vue:error', (error, instance, info) => {
          console.error('Vue error:', error)
        })
      })

c. Check for JavaScript errors: Open your browser's developer tools and look for any JavaScript errors in the console that might be preventing client-side code from executing. d. Use onMounted lifecycle hook: In your component or page, use the onMounted hook to check if client-side code is being executed:

      onMounted(() => {
        console.log('Component mounted on client-side')
      })

      onMounted(() => {
        console.log('Component mounted on client-side')
      })

e. Debugging with Node Inspector: For more detailed debugging, you can use Node Inspector as described in the Nuxt debugging documentation (https://nuxt.com/docs/guide/going-further/debugging#debugging-with-node-inspector). Run your Nuxt app with:

      nuxi dev --inspect

      nuxi dev --inspect

This will allow you to use Chrome DevTools to debug both server-side and client-side code. Remember, when using console.log for debugging, make sure it's not being stripped out by production builds. You might need to use more persistent logging methods or error tracking services for production environments. By implementing these testing and debugging strategies, you should be able to pinpoint where the client-side execution is failing and why your process.client code isn't running as expected. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Jesús SerranoOP•3w ago

@kapa.ai Adding the following finds me the page correctly, but the problem is that the JS does not execute well. I tried changing the cndURL to https://proxypre.acsa.junta-andalucia.es/apipre/front/mejorac/ and it runs the js fine, but outside the VPN it doesn't recognize the page, because it needs the one below. app: { baseURL: '/apipre/front/mejorac', buildAssetsDir: '/_nuxt/', cdnURL: '/healthqualityagency' },

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your question and the provided configuration, it seems you're facing issues with the correct execution of JavaScript and accessibility of your Nuxt application both inside and outside a VPN. Let's analyze this situation using the information from the Nuxt documentation. 1. Your current configuration:

app: {
    baseURL: '/apipre/front/mejorac',
    buildAssetsDir: '/_nuxt/',
    cdnURL: '/healthqualityagency'
},

app: {
    baseURL: '/apipre/front/mejorac',
    buildAssetsDir: '/_nuxt/',
    cdnURL: '/healthqualityagency'
},

This configuration is using three important properties: baseURL, buildAssetsDir, and cdnURL. Let's break down each of these: 2. baseURL: According to the Nuxt configuration documentation (https://nuxt.com/docs/api/nuxt-config#app), this sets the base path of your Nuxt application. Your setting looks correct for your use case. 3. buildAssetsDir: This specifies the folder name for the built site assets, relative to baseURL (or cdnURL if set). Your setting is using the default value. 4. cdnURL: This is where the issue likely lies. The Nuxt documentation (https://nuxt.com/docs/api/nuxt-config#app) states that cdnURL is "an absolute URL to serve the public folder from (production-only)". The problem you're experiencing is likely due to the interaction between baseURL and cdnURL. When you set cdnURL to <https://proxypre.acsa.junta-andalucia.es/apipre/front/mejorac/,> it works inside the VPN because it's an absolute URL. However, it fails outside the VPN because this URL is not accessible. To resolve this, you might want to try the following: 1. Remove the cdnURL setting entirely if you don't need to serve assets from a separate CDN. 2. If you do need to use a CDN, ensure that the cdnURL is an absolute URL that's accessible both inside and outside the VPN. For example:

app: {
    baseURL: '/apipre/front/mejorac',
    buildAssetsDir: '/_nuxt/',
    cdnURL: '<https://www.sspa.juntadeandalucia.es/healthqualityagency'>
},

app: {
    baseURL: '/apipre/front/mejorac',
    buildAssetsDir: '/_nuxt/',
    cdnURL: '<https://www.sspa.juntadeandalucia.es/healthqualityagency'>
},

3. If you need different configurations for different environments, you could use environment variables. As mentioned in the Nuxt documentation on runtime config (https://nuxt.com/docs/api/composables/use-runtime-config#environment-variables), you can set the cdnURL using an environment variable:

app: {
    baseURL: '/apipre/front/mejorac',
    buildAssetsDir: '/_nuxt/',
    cdnURL: process.env.NUXT_APP_CDN_URL || '<https://www.sspa.juntadeandalucia.es/healthqualityagency'>
},

app: {
    baseURL: '/apipre/front/mejorac',
    buildAssetsDir: '/_nuxt/',
    cdnURL: process.env.NUXT_APP_CDN_URL || '<https://www.sspa.juntadeandalucia.es/healthqualityagency'>
},

Then, you can set different NUXT_APP_CDN_URL values for your VPN and non-VPN environments. Remember to test these changes thoroughly in both your VPN and non-VPN environments to ensure they work as expected. If you continue to face issues, you might need to review your overall networking setup and how your application is being served in different environments. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Jesús SerranoOP•3w ago

@kapa.ai We have removed the cdnURL and now we have baseURL = “/apipre/front/mejorac/mejorac” and buildAssetsDir=“/apipre/front/mejorac/_nuxt/”. This makes the pages and js files load correctly but we are like at the start, it works with vpn and without vpn it only works without javascript. Without vpn I noticed that without js it doesn't run a json file and with js it does. So, this makes me think that this json only runs on client. In theory it is the following file: sspa.juntadeandalucia.es/agenciadecalidadsanitaria/apipre/front/mejorac/apipre/front/mejorac/_nuxt/builds/meta/ee5f85b3-ac5a-4f57-9440-9bc65590839c. json The problem is that Nuxt loads this json without “/agenciadecalidadsanitaria” in front and that's why it gives error and I think that's why it duplicates the url (https://www.sspa.juntadeandalucia.es/apipre/front/mejorac/apipre/front/mejorac/_nuxt/builds/meta/ee5f85b3-ac5a-4f57-9440-9bc65590839c.json). Now we don't know how to put that “/agenciadecalidadsanitaria” in front so that it doesn't crash. Is that JSON requested by Nuxt or is it something we request in our app? Although our test app only gets a page with a template.

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the information you've provided and the knowledge sources available, it appears that you're dealing with a complex routing and asset loading issue in your Nuxt application. Let's break down the problem and address your questions: 1. The JSON file you mentioned (ee5f85b3-ac5a-4f57-9440-9bc65590839c.json) is indeed requested by Nuxt, not by your application directly. This file is part of Nuxt's build output and is used for client-side rendering and hydration. It's typically located in the buildAssetsDir and contains metadata about your application's builds. 2. The issue you're experiencing with the duplicate URL and missing "/agenciadecalidadsanitaria" segment is likely due to how Nuxt is constructing URLs for asset loading based on your baseURL and buildAssetsDir configuration. To address this problem, you might need to adjust your Nuxt configuration. Here's a suggestion based on the Nuxt configuration documentation (https://nuxt.com/docs/api/nuxt-config#app):

export default defineNuxtConfig({
  app: {
    baseURL: '/agenciadecalidadsanitaria/apipre/front/mejorac/mejorac',
    buildAssetsDir: '/_nuxt/',
  },
  // ... other configurations
})

export default defineNuxtConfig({
  app: {
    baseURL: '/agenciadecalidadsanitaria/apipre/front/mejorac/mejorac',
    buildAssetsDir: '/_nuxt/',
  },
  // ... other configurations
})

By setting the baseURL to include the "/agenciadecalidadsanitaria" segment, you're telling Nuxt to prepend this to all routes and asset URLs. The buildAssetsDir is set to the default value, which should work in most cases. However, if you need more control over how URLs are constructed, especially for assets, you might want to consider using the app.cdnURL option. According to the Nuxt documentation on app.cdnURL (https://nuxt.com/docs/api/composables/use-runtime-config#appcdnurl), you can set a custom CDN URL for serving static assets. For example:

export default defineNuxtConfig({
  app: {
    baseURL: '/apipre/front/mejorac/mejorac',
    buildAssetsDir: '/_nuxt/',
    cdnURL: '<https://www.sspa.juntadeandalucia.es/agenciadecalidadsanitaria'>
  },
  // ... other configurations
})

export default defineNuxtConfig({
  app: {
    baseURL: '/apipre/front/mejorac/mejorac',
    buildAssetsDir: '/_nuxt/',
    cdnURL: '<https://www.sspa.juntadeandalucia.es/agenciadecalidadsanitaria'>
  },
  // ... other configurations
})

This configuration should help Nuxt construct the correct URLs for both your routes and assets, including the JSON file you mentioned. If you're still experiencing issues after making these changes, you might need to investigate further: 1. Check your server configuration (nginx, Apache, etc.) to ensure it's correctly handling the routes and asset requests. 2. Use browser developer tools to monitor network requests and see exactly what URLs are being requested for assets. 3. Consider using Nuxt's built-in devtools (https://nuxt.com/docs/guide/going-further/debugging) to debug routing and asset loading issues. Remember, the exact configuration you need might depend on your specific server setup and deployment environment. You may need to experiment with different combinations of baseURL, buildAssetsDir, and cdnURL to find the optimal configuration for your use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Gaming

Programming

BaseUrl configuration problem using proxy