CORS Policy Blocker doesn't pass access control check

Hi,

I’m trying to upload images to the `/fileupload’ endpoint but I’m getting the following error…

origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

my code…

export async function uploadFile(file) {
    const url = process.env.REACT_APP_UPLOAD_ENDPOINT
    const headers = {
        'Accept': 'application/json',
        'Authorization': `Bearer ${process.env.REACT_APP_BUBBLE_TOKEN}`,
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
    };

    const data = {
        name: file.name,
        contents: await convertToBase64(file),
        private: false,
    };

    return fetch(url, { method: 'POST', headers: headers, body: JSON.stringify(data) })
        .then(response => response.json())
        .catch(error => console.error('Error:', error));
}

Is there a way to fix this?

@brettb Just some thoughts:

  • If you are using an html file to interact with the browser this may not be suitable. A local server may be indeed needed.
  • Isn’t the access control header a response? It may not be needed in the client’s request.

Hi @cmarchan, I’m going to try a server request to see if that solves the issue.