2017-12-28 5 views
0

Ich versuche, meine React-Redux-App über Axios mit meiner implementierten Heroku-API zu kommunizieren.Immer noch ein 503 Fehler beim Ausführen von API-Aufrufen in meiner React-App

Wenn ich versuche, eine POST-Anfrage an meinem Heroku Server über Axios zu machen erhalte ich diese Fehlermeldung in meiner Konsole in den Chrome-Entwickler-Tool:

enter image description here

Wie Sie im screencap sehen können, ich Ich bekomme "No 'Access-Control-Allow-Origin' Header ist auf der angeforderten Ressource vorhanden." sowie Fehler-Status-Code von 503.

Und etwas finde ich eher seltsam ist, dass meine /register Anfrage zweimal ausgelöst wird. Ist das normal? Hier

enter image description here

ist die Konfiguration in meiner app.js Datei in meinem Backend-Code Cross-Domain-Anforderungen zu aktivieren:

app.use(function (req, res, next) { 
    res.header("Access-Control-Allow-Origin", '*'); 
    res.header("Access-Control-Allow-Credentials", true); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS'); 
    res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Origin,X-Auth,X-Requested-With,Content-Type,Accept,content-type,application/json,x-auth,Access-Control-Request-Method,Access-Control-Request-Headers"); 
    next(); 
}); 

Und hier ist der Axios-Code, der den API-Aufruf an den Server in meinem Front-End:

import axios from 'axios' 

export function register(fields) { 

    console.log('below are the fields'); 

    console.log(fields); 


    return function action(dispatch) { 

     let objArrSkills = Object.keys(fields.form_skills); 

     let skillsArr = objArrSkills.map(function (value) { 

      if (fields.form_skills[value] === true && fields.form_skills[value] !== undefined) { 

       return value; 

      } 

     }); 

     let objArrArts = Object.keys(fields.form_arts); 

     let artsArr = objArrArts.map(function (value) { 

      if (fields.form_arts[value] === true && fields.form_arts[value] !== undefined) { 

       return value; 

      } 


     }); 

     console.log('artsArr is...' + artsArr); 

     console.log('skillsArs is...' + skillsArr); 


     const request = axios({ 

      method: 'post', 

      url: "https://jammr-backend.herokuapp.com/register", 

      data: { 

       firstName: fields.form_first_name, 

       lastName: fields.form_last_name, 

       email: fields.form_email, 

       password: fields.form_password, 

       skills: skillsArr, 

       iWantToMake: artsArr, 

       street: fields.form_address, 

       city: fields.form_city, 

       provinceState: fields.form_province, 

       gender: fields.form_gender, 

       imLookingFor: ['Acting', 'Drawing', 'Music', 'Writing', 'Programming', 'Videography'] 


      }, 

      headers: { 

       'Content-Type': 'application/x-www-form-urlencoded', 

       'Access-Control-Allow-Origin': '*', 

       'Access-Control-Allow-Headers': "Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Origin,X-Auth,X-Requested-With,Content-Type,Accept,content-type,application/json,x-auth,Access-Control-Request-Method,Access-Control-Request-Headers", 

       'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS' 

      } 


     }); 


     return request.then(response => { 

       console.log('axios call ran! Below is response....'); 

       console.log(response); 

       dispatch({ 

        type: 'REGISTER', 

        payload: { 

         myId: response.data, 

         fields: fields, 

         skills: skillsArr, 

         iWantToMake: artsArr 

        } 

       }) 


      }, 
      err => { 

       if (err) throw err; 

      }) 


    } 
}; 

Ist irgendetwas mit meinem Code falsch? Hier ist mein front-end und back-end Code auf Github.

Und falls es relevant ist, wird mein Backend auf Heroku bereitgestellt. Außerdem habe ich versucht, das cors npm-Paket zu verwenden, aber es hat nicht funktioniert.

Antwort

0

Ich würde wetten, dass Sie die 503 aus dem Heroku-Stack wegen eines Problems mit Ihrem Backend bekommen. (Ein Zeitlimit vielleicht?) Offensichtlich wird der Heroku-Stapel die Kreuzherkunftsüberschriften nicht hinzufügen, weshalb Sie die Kreuzursprungfehler in der JS-Konsole sehen. Können Sie vielleicht Ihre Serverprotokolle posten?

Verwandte Themen