This support forum is no longer in use. Please use the Cloudinary Community at https://community.cloudinary.com/ to receive assistance from other members of the community and from Cloudinary's support team. For account-specific questions or if you believe that you've encountered a bug, please contact the Cloudinary team directly via the "submit a request" option on this support site.

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

Follow
Avatar
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

Sort by Date Votes
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    dika

    solved.

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

    my bad

    0
    Comment actions Permalink
  • Avatar
    Eric Pasos

    Hi Dika,

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

    0
    Comment actions Permalink
  • Avatar
    Mi Casa 2022

    Hi dika,

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

    0
    Comment actions Permalink
  • Avatar
    Aleksandar Kostadinov

    Hi @Mi Casa 2022

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

    0
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink

Post is closed for comments.