Skip to main content

Request header field x-access-token is not allowed by Access-Control-Allow-Headers in preflight response. CORS when trying on localhost

dika

I've enabled the unsigned uploading but still getting the CORS error:
Access to XMLHttpRequest at 'https://api.cloudinary.com/v1_1/{cloudName}/image/upload' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-access-token is not allowed by Access-Control-Allow-Headers in preflight response.

const formData = new FormData();

formData.append('file', attachmentFiles[0]);
formData.append('upload_preset', process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET);

try {
  const result = await Axios.post(
    `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUDINARY_CLOUDNAME}/image/upload`,
    formData,
  );

  console.log(result)
} catch (e) {
  console.error(e)
}
0

Comments

8 comments

Date Votes
  • Eric Pasos

    Hi Dika,

    The CORS error is encountered when you try to upload a file from your application's client-side code and the actual upload to your Media Library is done by the server-side implementation of your application. If you wish to upload the images at the client-side of your application, you should consider uploading the file directly from the browser as described in this link: https://cloudinary.com/documentation/upload_images#uploading_with_a_direct_call_to_the_rest_api

    Hope this helps.

    0
  • dika

    This has nothing to do with any server-side thing

    I've followed the "uploading the file directly from the browser" method from the beginning but still getting that error

    0
  • dika

    solved.

    somewhere in my code, there is Axios interceptor which creates a default header.

    my bad

    0
  • Eric Pasos

    Hi Dika,

    Thanks for the feedback and for the details on the fix you've made, it is very useful.

    0
  • Mi Casa 2022

    Hi dika,

    I think I have the same problem, may I know how did you solved it?

    0
  • Aleksandar Kostadinov

    Hi @Mi Casa 2022

    Could you please share the code you are using to perform the upload?

    0
  • iswarya

    I am too facing this issue can anyone please help me on this, I am a student i need to submit my assignment on friday.

    0
  • Eric Pasos

    Hi Iswarya,

    We are happy to help you review your code and, in this case, could you please help to open a support ticket here (https://support.cloudinary.com/hc/en-us/requests/new) and provide the information about your implementations and the exact error messages you get?

    Thanks.

    0

Post is closed for comments.

Didn't find what you were looking for?

New post