title: Calling Yelp API from frontend JavaScript code running in a browser
body: <p>Would really appreciate anyone's help. I am relatively new to developing in React, using Mac OSX and Chrome as my browser. I have a small application that attempts to make an async GET request from Yelp Fusion's API using 'isomorphic-fetch', but receive the following error:</p>
  
  <blockquote>
    <p>Fetch API cannot load <a href="https://api.yelp.com/v3/businesses/search" rel="nofollow noreferrer">https://api.yelp.com/v3/businesses/search</a>?<em>[remaining URL]</em> Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>' is therefore not allowed access. The response had HTTP status code 500. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.</p>
  </blockquote>
  
  <p>I have done a lot of searching to see what responses to identical issues already exist, but I am left even more confused in how to tackle my problem with my relatively new knowledge to this kind of development environment. (Answers that seem particularly helpful are: <a href="https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check">Response to preflight request doesn&#39;t pass access control check</a> and <a href="https://stackoverflow.com/questions/42708332/api-request-with-http-authorization-header-inside-of-componentdidmount">API Request with HTTP Authorization Header inside of componentDidMount</a>, but I do not really understand how to actually implement those solutions with my environment. Any attempts I make seem incorrect and do not result in a change.).</p>
  
  <p>As a side note: I have installed the Allow-Control-Allow-Origin: * extension on my Chrome browser, but I receive the same error - just a shortened, less elaborate description of it:</p>
  
  <blockquote>
    <p>Fetch API cannot load <a href="https://api.yelp.com/v3/businesses/search" rel="nofollow noreferrer">https://api.yelp.com/v3/businesses/search</a>?<em>[remaining URL]</em>. Response for preflight has invalid HTTP status code 500</p>
  </blockquote>
  
  <p>The following is how I call the fetch in my code:</p>
  
  <pre><code>var options = (
      method: 'get',
      headers: new Headers({
          'Access-Control-Allow-Origin': '*',
          'Authorization': [my token]
          'Content-Type': 'application/json'
      })
  }
  return fetch(url, options);
  </code></pre>
  
  <p><strong>Is this an issue due to the syntax of my header with Yelp Fusion's OAUTH2 token requirements, do I need to do something proxy-related, or is the reason because of something else?</strong> If proxy-related, currently I am running a fully client-driven application and do not use server-side code at all. Would this still be possible given my environment? <strong>Any guidance as to which direction I should go and clarification of my misconceptions would be greatly appreciated.</strong></p>
  
  <p>Again, thank you for your help for a growing developer.</p>