Configuring server proxy issue or something else in local development

[JeremieLitzler]

Hi,

I am trying to configure the proxy in local using Visual Studio Code and though I followed the docs, the DevTools gives a 404 on a URI mapped.

My vite.config.ts is:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api-llm': {
        target: 'https://api.infomaniak.com/2/llm/701/chat/completions',
        changeOrigin: true, // Optional: Change origin header to match frontend
        secure: false, // Optional: Disable checks for https on target
      },
    },
  },
});

and I use it in a Vue component:

const generate = async () => {
  const jsonData = JSON.stringify({
    messages: [{ content: prompt.value, role: 'user' }],
  });

  const options: RequestInit = {
    method: 'POST', // Set request method to POST
    headers: {
      Authorization: `Bearer ${import.meta.env.VITE_LLM_API_KEY}`, // Replace with your authorization token
      'Content-Type': 'application/json', // Set content type to JSON
    },
    body: jsonData, // Send the JSON data in the body
  };
  const llmApi = `/api-llm`;
  const response = await fetch(llmApi, options);

  if (!response.ok) {
    error.value = `API request failed with status ${response.status}`;
    throw new Error(error.value);
  }

  const responseJson: LlmResult = await response.json();
  emit('@capture', responseJson);

What am I missing? I fear it is obvious but I put my finger on the problem...

Thanks.