Wie kann man einen "preflight hat ungültigen HTTP-Statuscode 500" Fehler?

Question

Ich versuche, eine Verbindung mit der Yelp-API herzustellen. Verwenden von Vue und Axios. Ich kann keine Verbindung herstellen. Ich erhalte Fehler:

XMLHttpRequest cannot load https://api.yelp.com/v3/businesses/search?location=sarnia&limit=50 . Response for preflight has invalid HTTP status code 500

Hier ist mein Code:

new Vue({ 
    el: '#app', 
    data: { 
     businesses: [] 
    }, 

    // Logic Methods 

     mounted() { 
      var app = this; 
      var url = 'https://api.yelp.com/v3/businesses/search?location=sarnia&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" 
      }) 
    } 
}) 

Ich gehe davon aus das etwas mit CORS zu tun ist, aber ich bin nicht sicher, wie diese zu lösen. Ich habe das CORS Chrome-Plugin aktiviert und habe alle Header. Kann ich einen Einblick bekommen, was das Problem sein kann und wie es behoben werden kann? Ist das etwas für yelp?

Answer 1

Erste Dinge zuerst. Die Header, die Sie auf Ihre Anfrage wird passieren, werden nicht als Request-Header gemeint:

"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", 

Wie Sie here sehen können, sollten sie von dem Server in einer Reaktion verwendet werden CORS Regeln zu spezifizieren. So gibt es keinen positiven Effekt, indem Sie sie in eine Anfrage einfügen - in der Tat könnte sogar sein, was das Problem verursacht (obwohl es ein 4xx Fehler sein sollte).

Zweitens bedeutet die Preflight-Anfrage, die eine 500 erhält, dass der Server ein Problem mit der Anfrage hat, die Sie machen, und es gibt nichts, was Sie tun können (theoretisch). In der Praxis können APIs jedoch oft 500 Fehler ergeben, wenn eine von Ihnen gestellte Anforderung falsch ist, und wenn Sie sie ändern, können Sie einen Erfolg erzielen (falsche Implementierung, aber häufig in der Praxis).

Sie sollten sich mehr Informationen über den Fehler ansehen - starten Sie einfach (z. B. Postman oder ein einfaches HTTP-Tool), indem Sie das Minimum an Informationen bereitstellen (z. B. POST https://api.yelp.com/v3/businesses/search?location=sarnia nur mit Ihrem Autorisierungsheader). Wenn dies erfolgreich ist, füge mehr von den Dingen hinzu, die du tatsächlich verwendest (Parameter, verschiedene Inhaltstypen usw.), um zu sehen, wenn du einen Fehler bekommst.

Sie können auf diese Weise die API selbst unter Umgehung von Vue, Axios und dem Browser testen, wodurch sich die von Ihnen gestellten Anforderungen möglicherweise ändern. Auf diese Weise können Sie die Ursache des Problems herausfinden. Auch hier handelt es sich wahrscheinlich um ein Problem mit dem Server, das jedoch möglicherweise durch bestimmte Anforderungen in Ihren Kunden verursacht wird.

Viel Glück!