apolloClient aborted after graphql request - vue.js

Question

I'm trying to make a request to graphql api and it's aborting me after I added no-cors. Before this it was giving me this error Access to fetch at 'https://venia.magento.com/graphql' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
And now I'm getting this: createHttpLink.ts:166 POST https://venia.magento.com/graphql net::ERR_ABORTED 500 with error message: ServerParseError: Unexpected end of JSON input at JSON.parse (<anonymous>) at parseJsonBody
Does anybody else has this problem ? And what could be the solution? Thank you for your answers:)
main.js:
import { createApp, h, provide } from 'vue'
import './style.css'
import App from './App.vue'
import { ApolloClient, HttpLink, InMemoryCache } from '#apollo/client/core'
import { DefaultApolloClient } from '#vue/apollo-composable'
// HTTP connection to the API
const httpLink = new HttpLink({
// You should use an absolute URL here
uri: 'https://venia.magento.com/graphql',
fetchOptions: {
mode: 'no-cors',
},
headers:{
'Content-Type': 'application/graphql',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
}
})
// Cache implementation
const cache = new InMemoryCache()
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache,
})
const app = createApp({
setup () {
provide(DefaultApolloClient, apolloClient)
},
render: () => h(App),
})
app.mount('#app');
and this is my App.vue:
<template>
</template>
<script setup>
import {useQuery} from '#vue/apollo-composable'
import { watchEffect } from '#vue/runtime-core';
import gql from 'graphql-tag';
const PRODUCTS_QUERY = gql`
query products {
products(filter: {sku: {eq: ""}}, pageSize: 5, currentPage: 3) {
items {
name
sku
price_range {
minimum_price {
regular_price {
value
currency
}
final_price {
value
currency
}
discount {
amount_off
percent_off
}
}
maximum_price {
regular_price {
value
currency
}
final_price {
value
currency
}
discount {
amount_off
percent_off
}
}
}
}
}
}
`;
const { result, loading, error } = useQuery(PRODUCTS_QUERY);
watchEffect(() => console.log(result))
</script>