Error Cors when fetching image api

Henry

July 06, 2021 17:51

when i call api to get all images, i recieve error:

Access to fetch at 'https://api.cloudinary.com/v1_1/<name_cloudinary>/resources/image' from origin 'http://localhost:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Here my code:

 

0

• Official comment

  

  Danny Valentine

  July 07, 2021 10:12

  Hi Henry.

  Without knowing a bit more about your code and environment it's difficult to pinpoint why you might be getting CORS errors. I'm not sure if you're using Express, but if you are, this middleware may help: https://expressjs.com/en/resources/middleware/cors.html

  As for the request itself, you need to specify Basic auth as base64 encoded. I've tried this locally and it has returned a 200 in my testing. I've used dotenv instead of calling environment variables directly as I find this a bit more reliable.

  require('dotenv').config();
  const fetch = require('node-fetch');
  
  const ENDPOINT_FETCH_ALL = 'https://api.cloudinary.com/v1_1/' + process.env.CLOUD_NAME + '/resources/image';
  
  fetchImagesInCloudinary();
  
  async function fetchImagesInCloudinary() {
      let images = [];
      let headers = new fetch.Headers();
  
      headers.set('Authorization', 'Basic ' + Buffer.from(process.env.API_KEY + ":" + process.env.API_SECRET).toString('base64'));
  
      const response = await fetch(ENDPOINT_FETCH_ALL, {
          method: "GET",
          headers: headers
      });
  
      console.log({ response });
  
      return images;
  }

  Give that a try and let us know how you get on. Ultimately though, it may be easier to use our Node SDK as that greatly simplifies connecting to a cloud, fetching assets, and much much more.

  Kind regards,
  -Danny
• 

  Rotimi Babalola

  January 10, 2022 15:47

  Hello Danny,

  I'm currently facing this same issue. I'm trying to make this same request in the browser environment but I get this same CORS error. I have tried to use the Node SDK but that does not seem to work in the browser environment.

  Is there anything else I can do? Thanks

  0
• 

  Eric Pasos

  January 12, 2022 06:16

  Hi Rotimi,

  Depending on your implementation, the CORS can be handled in the POST header or by using middleware. But in order to be able to debug your implementations, may I please request a sample working code showing the error you are encountering? You may share the link here (e.g., GitHub) or you can also send us by opening a support ticket here (https://support.cloudinary.com/hc/en-us/requests/new). Thanks.

  0

Post is closed for comments.