1

I am trying to load Behance project data via their API. Whether its localhost or prod, I am getting the following error --

Fetch API cannot load XXX. 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:5000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Not sure how to solve for this. My code in the Portfolio component below --

getPortfolio = () => {

const USER_ID = `XXX`,
      PROJECT_ID = `XXX`,
      API_KEY = `XXX`;

const BEHANCE_URL = `https://api.behance.net/v2/users/${USER_ID}/projects?client_id=${API_KEY}`;
console.log(BEHANCE_URL);

fetch(BEHANCE_URL, {
  method: 'get',
  dataType: 'jsonp',
  headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
  }
}).then((response) => {
  return response.json();
}).then((responseData) => {
  return responseData;
}).catch((err) => {
  return err;
});

}

UPDATE: Instead of fetch, using jQuery ajax works. --

$.ajax({
  url: BEHANCE_URL,
  type: "get",
  data: {projects: {}},
  dataType: "jsonp"
}).done((response) => {
  this.setState({
    portfolioData: response['projects']
  });
}).fail((error) => {
  console.log("Ajax request fails")
  console.log(error);
});
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Yasir
  • 879
  • 5
  • 13
  • 31
  • Did you figure out why with jquery it does not throw the CORS error? Because that should not be the case. Look at this, stackoverflow.com/questions/25923796/cors-error-with-jquery. I am curious to know how was jquery working in place of fetch. – coderHASH64codingHASH46code Jun 27 '18 at 15:56
  • I just implemented this in a project and it sure enough works. I have heard that with `fetch()` and `jQuery`, you can circumvent CORS errors and sure enough you can, apparently. – Daniel Oct 18 '18 at 21:41

1 Answers1

-1

This seems to have do less with React and more with Behance. What you are getting is a CORS error as you probably figured out. The short explanation is that CORS is a security measure put in on the browser so that websites cannot request other websites from the browser to appear to be the second website. It is a safety measure in place to protect from some phishing attacks.

CORS can be disabled by the server (in this case, Behance) but they decide not to, for legitimate reasons.

Behance would probably allow you to make the request you are trying to make from a server instead. Once you do that, you will need to get the information from your server to your React application, and you will be good to go!

Sammy I.
  • 2,523
  • 4
  • 29
  • 49
  • whats odd is, the introduction of jQuery and doing a $.ajax works to pull the data – Yasir May 02 '17 at 20:16
  • You mean using jQuery instead of Fetch? That is indeed odd. – Sammy I. May 02 '17 at 20:46
  • yea, this works -- $.ajax({ url: BEHANCE_URL, type: "get", data: {projects: {}}, dataType: "jsonp" }).done((response) => { this.setState({ portfolioData: response['projects'] }); }).fail((error) => { console.log("Ajax request fails") console.log(error); }); – Yasir May 02 '17 at 20:51