help: fetching data from hosted nuxt server api's cors issue

[NyllRE]

📚 What are you trying to do?

I have hosted my nuxt project to vercel so it acts like a backend for my ionic app, to test the api calls I made this

const url = ref('');

const tryInternet = async () => {
    // fetch data from url and return it
    data.value = await useFetch(url.value)
        .then((res) => {
            console.log(res);
            return res.data;
        })
        .catch((e) => 'error: ' + e)
};

// this uses pug, an html preprocessor
.ion-padding
    h1 {{ data }}
    IonInput( v-model="url" placeholder="try" )
    IonButton( expand="block" @click="tryInternet" ) Get

in the server api server/api/count.js:

export default defineEventHandler((event) => {
	return { api: 'works' };
});

using it locally from the same server localhost:3000 works fine:

when I tried hosting it to a backend and retrieving the data from localhost:3000 requesting from the server this comes:

🔍 What have you tried?

I have tried the nuxt-proxy package but the issue was different, I wanted any host to be able to get data from the backend even though I knew this wasn't safe. the issue is that an ionic app doesn't have a web domain to tell the proxy to only send requests to this specific domain. so I didn't know how am I supposed to send to only my app.

ℹ️ Additional context

should I either send a request to only a specific domain somehow? how would I do this with nuxt ionic? or should I make it accept requests from anywhere? and how can I tell the nuxt server to allow any server's requests?

[NyllRE]

this is how I fixed the issue to work (unsafe):

routeRules: {
    '/tabs/': { ssr: false },
    '/api/*': {
        cors: false,
        headers: { 'Access-Control-Allow-Origin': '*' },
    },
},

but is there a more safe method that I could use cors with to work with an ionic app?

[fanckush]

@NyllRE I think Ionic apps have the domains:

• capactior://localhost for iOS
• and http://localhost for Android

couldn't you use those two to allow only those origins instead of everything

[NyllRE]

isn't this still unsafe since anyone who wants to get data from the api could just run the requests through a localhost? I need the communication between the app and the server to be secure with zero outside access to the data

[danielroe]

cors headers are only respected by browsers anyway. anyone can bypass them easily.

please don’t think adding cors headers secures your app