1

I want to make an HTTP request to the Cloudinary API for pictures in my account. The url necessary looks like this:

https://<<API KEY>>:<<API SECRET>>@api.cloudinary.com/v1_1/<<RESOURCE NAME>>/resources/image

and when I hit this url from the browser, I get what I'm looking for, a beautiful JSON object with all my pictures.

But when I hit the url from within a React component, 

componentDidMount() {
  this.props.fetchArt();
}

I get the following error:

TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials:

The action creator looks like

export function fetchArt() {
  const url = 'https://'+CLOUDINARY_KEY+':'+CLOUDINARY_SECRET+'@api.cloudinary.com/v1_1/prints20/resources/image';
  const request = fetch(url).then(res => res.json())
  return {
    type: FETCH_ART,
    payload: request
  }
}

Link to the repo: https://github.com/PantherHawk/prints20-2018

Thanks a million in advance!

Rollo_Serpentine
  • 21
  • 1
  • 3
  • If this is a CLOUDINARY_SECRET, it should be secret. Don't put it in your front-end code. You probably have to create a server that accesses it. It will also fix your CORS problem – dczajkowski Jun 26 '18 at 00:56
  • This should help too: https://stackoverflow.com/questions/24431943/how-do-i-get-a-list-of-my-images-from-cloudinary-from-client-side-javascript – dczajkowski Jun 26 '18 at 01:01

1 Answers1

0

If your endpoint requires some sort of authorization you'll need to pass that info inside the headers of your request. Cloudinary Authentication is done using Basic Authentication over secure HTTP. Your Cloudinary API Key and API Secret are used for the authentication.

fetch('https://api.cloudinary.com/v1_1/CLOUD_NAME/resources/image', {
  method: 'get',
  headers: {
    'Authorization': 'Basic ' + base64.encode(API_KEY + ":" + API_SECRET),
  },
}).then(res => res.json())
Rizal Ibnu
  • 445
  • 4
  • 10
  • The error persists, with the error ```Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.``` Any other tips? – Rollo_Serpentine Jun 25 '18 at 17:49
  • Should I write this fetch request in my backend server? Because I'm still finding CORS issues when running it from my componentDidMount function. Thanks. – Rollo_Serpentine Jun 25 '18 at 18:23
  • CORS is another issues, this issues is on cloudinary side not in your code. I think cloudinary doesn't allow the origin localhost:8080. Try to deploy your site on server or for security, put in your backend. – Rizal Ibnu Jun 26 '18 at 08:11
  • Fetch request only available in browser, if your backend use node js, you can use this library [https://github.com/bitinn/node-fetch](https://github.com/bitinn/node-fetch) – Rizal Ibnu Jun 26 '18 at 08:18