[BUG]: CORS error when calling Lago API endpoint via JS client

[DoNguyenDung93]

Describe the bug
I'm getting a CORS error when trying to call local lago api endpoint from my localhost js client.

To Reproduce
Steps to reproduce the behavior:

1. Setup a new self-hosted Lago instance
2. Update .env with:

LAGO_FRONT_URL="http://localhost:41211"
FRONT_PORT=41211
LAGO_API_URL="http://localhost:41212"
API_PORT=41212

3. Run docker compose.
4. Create customer, billing metrics, plans, etc.
5. Setup JS client:

import { LAGO_API_KEY, LAGO_BASE_PATH } from "@constants/index";
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"

import { Client } from 'lago-javascript-client';

const lagoClient = Client(LAGO_API_KEY, { baseUrl: LAGO_BASE_PATH });

export const createLagoEvent = createAsyncThunk<any, any, { rejectValue: string }>(
    'lago/createEvent',
    async (billableMetricCode: string) => {
        try {
            const timeStamp = Date.now();
            const transactionID = transaction_${timeStamp};
            const response = await lagoClient.events.createEvent({
                event: {
                  transaction_id: transactionID,
                  external_subscription_id: "fca28a4c-5bea-4423-a535-94f2a37b5b93",
                  code: billableMetricCode
                },
            });
            console.log(response);
            const result = await response.json();
            return result;
        } catch (error) {
            console.log(error);
            return convertToString(error);
        }
    }
)

function convertToString(obj: any) {
    try {
        return JSON.stringify(obj);
    } catch {
        return String(obj);
    }
}

interface LagoState {
    result: any;
    error: string | null;
    loading: boolean;
}

const initialState: LagoState = {
    result: null,
    error: null,
    loading: false
}

const lagoSlice = createSlice({
    name: 'lago',
    initialState: initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
        .addCase(createLagoEvent.pending, (state) => {
            state.loading = true;
            state.error = null;
        })
        .addCase(createLagoEvent.fulfilled, (state, action) => {
            state.loading = false;
            state.result = action.payload;
        })
        .addCase(createLagoEvent.rejected, (state, action) => {
            state.loading = false;
            state.error = action.payload ?? "Unknown error";
        })
    }
});

export default lagoSlice.reducer;

Expected behavior
I would like to know how to resolve this? Normally CORS errors are resolved with "Access-Control-Allow-Origin" at the server header, but I'm not sure how to configure that for localhost Lago API.

[jdenquin]

@DoNguyenDung93 you can't call the API with a front end application directly. This is a choice on our side and we do not plan to support it. Why? You have to expose your API key.

I would recommend to use a small backend proxy (you can do it with next in some minutes) to handle the query from your front end.