title: How to stop a "preflight has invalid HTTP status code 500" error?
body: <p>I am trying to connect to the yelp API. Using Vue and Axios. I am unable to connect. I am getting error:</p>
  
  <blockquote>
    <p><code>XMLHttpRequest</code> cannot load <a href="https://api.yelp.com/v3/businesses/search?location=sarnia&amp;limit=50" rel="nofollow noreferrer">https://api.yelp.com/v3/businesses/search?location=sarnia&amp;limit=50</a>. Response for preflight has invalid HTTP status code 500</p>
  </blockquote>
  
  <p>Here is my code:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
        businesses: []
    },
  
    // Logic Methods
  
        mounted() {
            var app = this;
            var url = 'https://api.yelp.com/v3/businesses/search?location=sarnia&amp;limit=50';
            var config = {
                headers: {
                    "Cache-Control": "no-cache",
                    'Content-Type': 'application/x-www-form-urlencoded',
                    "Access-Control-Allow-Origin": '*',
                    "Access-Control-Allow-Methods": 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
                    "Access-Control-Allow-Headers": 'Origin, Content-Type, X-Auth-Token, Accept',
                    "Access-Control-Max-Age": "1728000",
                    'Authorization': 'MyAccessCode'
                }
            };
  
            axios.get(url, config)
              .then(function(response) {
                  console.log(response.headers);
                  console.log(response);
                  app.businesses = response.data
              })
              .catch(function(error) {
                  app.businesses = "ERROR"
              })
    }
  })
  </code></pre>
  
  <p>I am assuming this is something to do with CORS but I am unsure how to solve this. I have the CORS Chrome plugin to enable and have all the headers. Can I get any insight on what the problem can be and how to fix it? Is this something on yelp's behalf?</p>