CORS policy Error hosted at heroku and frontend in Netlify [duplicate]

Question

Hi I have a backend hosted at heroku and frontend in Netlify when I am trying to connect it is giving me the following error Access to fetch at 'https://abc.herokuapp.com/profile' from origin 'https://www.exam.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

In client call i have added

    const callUserPage = async () => {
        try {
            const res = await fetch("https://abc.herokuapp.com/profile", {
                method: "GET",
                headers: {
                    Accept: "appllication/json",
                    "Content-Type": "application/json",
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Methods":
                        "DELETE, POST, GET, OPTIONS",
                    "Access-Control-Allow-Headers":
                        "Content-Type, Authorization, X-Requested-With",
                },
                credentials: "include",
            });
            const data = await res.json();
            setUserData(data);
            if (!res.status === 200) {
                const error = new Error(res.error);
                throw error;
            }
        } catch (error) {
            navigate("/login");
        }
    };

Answer 1

you should try installing npm install cors library. Here's the library

Now in your backend index or server file do the following:

import cors from 'cors';
...

app.use(cors()); //app name should've different if you declare it with another name
...

Let me know if this library solve your problem :)