authentication - "Unauthorized" 401 error on making client side upload to Cloudinary - Stack Overflow

admin管理员组

文章数量:1287647

I wanted to use Cloudinary's API to upload images from the client side for my project.

This is an example from Cloudinary's docs to make signed requests from client side: Link to project.

The project uses Express + Node. I am using Next.js.

A signature is generated and appended to a new FormData through a server function. On the client side, I call this server action to receive the signed form data. Then I append the files(s) and make a request.

I compared the signature generated on the server with the signature received as error. They are the same! The timestamp also matches. I don't know what I am missing now.

I have an old account so it uses "fixed folders" - if that could create any issues.

Here are the server actions:

'use server';

import cloudinary, { cloudinaryConfig } from "./cloudinary.config";

function getUploadSignature(){
  // get timestamp in seconds
  const timeStamp = Math.round((new Date).getTime() / 1000);

  const signature = cloudinary.utils.api_sign_request({
    folder: 'imageUploadTest',
    timeStamp,
  }, cloudinaryConfig.api_secret);  
  
  console.log({getSignTS: signature, timeStamp});

  return { 
    cloudName: cloudinaryConfig.cloud_name,
    apiKey: cloudinaryConfig.api_key, 
    timeStamp, 
    signature, 
  };
}

export async function getSignedFormData(){
  const formData = new FormData();
  const { cloudName, apiKey, timeStamp, signature } = getUploadSignature();

  formData.append("api_key", apiKey);
  formData.append("timestamp", timeStamp);
  formData.append("signature", signature);
  formData.append("folder", "imageUploadTest");
  // remove cloud name before making request;
  formData.append('cloudName', cloudName);

  return formData;
}

I have also compared the Secret, Key and Cloud name. Everything looks fine and yet I am getting the unauthorized 401.

I wanted to use Cloudinary's API to upload images from the client side for my project.

This is an example from Cloudinary's docs to make signed requests from client side: Link to project.

The project uses Express + Node. I am using Next.js.

A signature is generated and appended to a new FormData through a server function. On the client side, I call this server action to receive the signed form data. Then I append the files(s) and make a request.

I compared the signature generated on the server with the signature received as error. They are the same! The timestamp also matches. I don't know what I am missing now.

I have an old account so it uses "fixed folders" - if that could create any issues.

Here are the server actions:

'use server';

import cloudinary, { cloudinaryConfig } from "./cloudinary.config";

function getUploadSignature(){
  // get timestamp in seconds
  const timeStamp = Math.round((new Date).getTime() / 1000);

  const signature = cloudinary.utils.api_sign_request({
    folder: 'imageUploadTest',
    timeStamp,
  }, cloudinaryConfig.api_secret);  
  
  console.log({getSignTS: signature, timeStamp});

  return { 
    cloudName: cloudinaryConfig.cloud_name,
    apiKey: cloudinaryConfig.api_key, 
    timeStamp, 
    signature, 
  };
}

export async function getSignedFormData(){
  const formData = new FormData();
  const { cloudName, apiKey, timeStamp, signature } = getUploadSignature();

  formData.append("api_key", apiKey);
  formData.append("timestamp", timeStamp);
  formData.append("signature", signature);
  formData.append("folder", "imageUploadTest");
  // remove cloud name before making request;
  formData.append('cloudName', cloudName);

  return formData;
}

I have also compared the Secret, Key and Cloud name. Everything looks fine and yet I am getting the unauthorized 401.

• authentication
• next.js
• file-upload
• client-server
• cloudinary

Share Improve this question Follow asked Feb 23 at 15:15 ManavManav 133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Cloudinary should return a response header that include the error details in the x-cld-error header, and you can see the value by using your browser's web developer tools to examine that response.

本文标签： authenticationquotUnauthorizedquot 401 error on making client side upload to CloudinaryStack Overflow