CORS policy Error with Bearer Token Request

  bearer-token, cors, javascript, reactjs

I am building a react application postAPI using bearer token.

I already stored bearer token in localStorage and try to receive data for below code.

However, it is returning me CORS policy error. I am able to receive data from postman using Authorization tab. It is not working for a Header tab along with Authorization Bearer token though.

Could you help me how I can resolve this issue? I usually open cors policy from the server, but this is actually from a third party api.

I have tried no-cors, but you can’t send headers with no-cors mode.

Access to fetch at 'https://d9u7x85vp9.execute-api.us-east-2.amazonaws.com/engine' from origin 'http://localhost:3000' 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.


const postAIMove = async () => {

    const fetchOptions = {
        method: "POST",
        withCredentials: true,
        credentials: "include",
        headers: { 
            "Accept": "application/json",
            "Content-Type": "application/json",
            "Authorization": `Bearer ${localStorage.getItem("authToken")}`,
        },
        body: JSON.stringify({board})
    }



  const res = await fetch(`${API_URI}/engine`, fetchOptions)

Source: Ask Javascript Questions

LEAVE A COMMENT