When i want to connect to my apollo-server fastify backend there are Cors problems

Question

i am have a expo react native as a frontend and i created a graphql-backend using fastify and apollo server.

Here is my backend:

    import { Prisma, PrismaClient } from "@prisma/client";
import Fastify from "fastify";
import { ApolloServer, BaseContext } from "@apollo/server";
import fastifyApollo, {
  fastifyApolloDrainPlugin,
  fastifyApolloHandler,
} from "@as-integrations/fastify";
import cors from "@fastify/cors";

const typeDefs = require("./schema.js");
const PrismaStudioFastify = require("prisma-studio-fastify");
const path = require("path");

const prisma = new PrismaClient();
const fastify = Fastify({ logger: true });
fastify.register(cors, {
  origin: "*",
});
const resolvers = {
  Query: {
    getEmployees: () => {
      return prisma.employees.findMany();
    },
    getCostUnits: () => {
      return prisma.costUnit.findMany();
    },
    getArticles: () => {
      return prisma.article.findMany();
    },
  },
  Mutation: {
    addEmployee: (parent: any, args: any) => {
      return prisma.employees.create({
        data: {
          firstName: args.firstName,
          lastName: args.lastName,
          personalNumber: args.personalNumber,
        },
      });
    },
  },
};

const apollo = new ApolloServer<BaseContext>({
  typeDefs,
  resolvers,
  plugins: [fastifyApolloDrainPlugin(fastify)],
});

fastify.register(PrismaStudioFastify, {
  schemaPath: path.join(__dirname, "../prisma/schema.prisma"),
  auth: {
    enabled: true,
    default: {
      email: "[email protected]",
      password: "prisma",
    },
    secret: `a secret with minimum length of 32 characters`, // required when auth is enabled
  },
});

const startServer = async () => {
  await apollo.start();
  await fastify.register(fastifyApollo(apollo));

  await fastify.listen({
    port: 8080,
  });
};

startServer();

When i start the Server i see the Apollo Sandbox on http://localhost:8080/graphql. I then checked with postman and i can execute a query and get a valid result.

then i checked with react-native: When i execute the Query with the xCode Simulator it is working - when i open the web of the react-native app i get these Cors Errors:

Here is my Frontend code:

    import { StyleSheet, View } from "react-native";

import { Link } from "expo-router";
import ImageViewer from "components/ImageViewer";
import Button from "components/Button";
import * as ImagePicker from "expo-image-picker";
import { useEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  gql,
} from "@apollo/client";
import UserList from "components/UserList";
const PlaceholderImage = require("../assets/images/background-image.png");
const client = new ApolloClient({
  uri: "http://localhost:8080/graphql",

  cache: new InMemoryCache(),
});
const Get_Employees_Query = gql`
  query GetEmployees {
    getEmployees {
      firstName
      lastName
      personalNumber
    }
  }
`;
export default function Page() {
  const [selectedImage, setSelectedImage] = useState(null);

  const pickImageAsync = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      setSelectedImage(result.assets[0]?.uri);
    } else {
      alert("You did not select any image.");
    }
  };
  useEffect(() => {
    client
      .query({
        query: Get_Employees_Query,
      })
      .then((result) => console.log(result.data));
  }, []);

  return (
    <View style={styles.pageContainer}>
      <Link href="/about">About</Link>
      <View style={styles.imageContainer}>
        <ImageViewer
          placeholderImageSource={PlaceholderImage}
          selectedImage={selectedImage}
        />
      </View>
      <View>
        <UserList />
        <Button label="Choose a photo" onPress={pickImageAsync} />
      </View>
      <StatusBar style="dark" />
    </View>
  );
}

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#25292e",
  },
  imageContainer: {
    flex: 1,
    paddingTop: 58,
  },
  footerContainer: {
    flex: 1 / 3,
    alignItems: "center",
  },
});