0
votes

Difficulté à obtenir des itinéraires express / réagir au travail

Je vais juste apprendre Express / React et j'essaie d'être configuré avec des itinéraires et des connexions de base de base de données. Je soupçonne que je manque quelque chose de très simple. J'ai essayé de le faire bouillir jusqu'à ce qui suit.

backend fort> p>

serveur.js: p> xxx pré>

/ Routes / API / EVENTS.JS: P>

import React, { Component } from 'react';
import axios from 'axios';

class EventList extends Component {
    constructor() {
        super();
        this.state = {
            events: []
        }
    }
    componentDidMount() {
        axios.get('/api/events')
             .then(events => {
                this.setState({events: events.data})
             })
             .catch(err => console.log(err))
    }
    render() {
        var events = this.state.events;
        return (
            <div>
                <p>Events:</p>
                <ul>
                    { events.map(({ id, name }) => (
                        <li>{name}</li>
                    ))}
                </ul>
            </div>
        )
    }
}

export default EventList;


5 commentaires

Obtenez-vous une erreur sur la console de l'application Express?


@Muljayan je n'étais pas, mais ensuite après une période de temps, j'ai obtenu ce qui suit: Events.js: 174 [0] Dresser; // Evénement «Erreur» non confondé [0] ^ [0] [0] Erreur: connexion perdue: le serveur a fermé la connexion. C'est très étrange parce que je n'avais rien touché. Voir aussi mon édition ci-dessus - je reçois maintenant une 404 au lieu d'un 500.


Sur quel port vous démarrez Express Server? Je pense que vous l'avez commencé sur 5000 ports et lorsque vous appelez de la fin de la fin de 3000.


Vous obtenez probablement un 404 pour localhost: 3000 / API car votre serveur Express fonctionne sur le port 5000.


Désolé, j'aurais dû spécifier. Je reçois le port d'un fichier .env et le port est 3306. Lorsque je démarre le serveur, il est indiqué qu'il est écouté sur 3306.


3 Réponses :


0
votes

Je pense que vous exécutez votre serveur sur le port 5000 et avant sur Port 3000. Si vous demandez des événements avec http: // localhost: 5000 / API / Événements strong> au lieu de / API / événements forts>, vous obtiendrez 200 code d'état avec vos données JSON.

// as is
axios.get('/api/events')

// to be
axios.get('http://localhost:5000/api/events')


3 commentaires

Désolé, j'aurais dû spécifier. Je reçois le port d'un fichier .env, et le port est 3306. Lorsque je démarre le serveur, il est indiqué qu'il est écouté sur 3306. J'ai essayé axios.get ('http: // localhost: 5000 / API / Événements ') et Axios.get (' http: // localhost: 3306 / API / Evénements ') en vain.


Avez-vous essayé d'appeler ' localhost: 3306 / API / Événements ' sur un navigateur? Obtenez-vous toujours un code de statut 404? Pourriez-vous vérifier le port de votre serveur avant?


Lorsque j'essaie localhost: 3306 / API / Events I Obtenir "Ce site ne peut pas être atteint" ( err_connection_refused ). Je suis sûr que mon frontend est en cours d'exécution sur localhost: 3000 - la page se charge bien, mais pas les données attendues de la demande d'obtention.



0
votes

Vous pouvez essayer de taper la fonction de composantDidMount comme ceci.

const cors = require('cors')

app.use(cors())


1 commentaires

Merci pour ces suggestions, mais aucun ne semblait fonctionner.



0
votes

Vous devriez ajouter un proxy à l'intérieur du package.json en frontale comme ceci. "Proxy": " http: // localhost: 5000 ",


5 commentaires

Cela ne semble pas fonctionner. S'il vous plaît voir ma mise à jour sur le message d'origine.


@ user6647072 Dans Postman, vérifiez votre API si cela fonctionne alors c'est le proxy.Je ne pense pas que MySQL a quelque chose à voir avec ce problème. Vous avez besoin de la proxy de toute façon, car votre avant et votre dos ne sont pas sur le même port.


Hmm j'ai ajouté "proxy": "http: // localhost: 3306" et Postman me donne: Erreur proxy: impossible de demande de proxy / API / événements de localhost: 3000 à http: / / Localhost: 3306 (Econnrefused). J'ai également ajouté CORS comme une personne suggérée, si cela aide.


@ user6647072 Dude Port 3306 est pour MySQL. Réagir des pourparlers à express non mysql.use localhost: 5000.Et N'oubliez pas que ce proxy est pour le projet réact de ne pas exprimer .Postman ne sait pas sur ce proxy.


Ok, oui, je pense que c'est là que je me suis confus. Cela fonctionne maintenant (avec 3306 non 5000 - 5000 est juste une valeur par défaut au cas où le .env n'est pas là, ce n'est pas réellement utilisé. Je ne suis pas sûr de savoir pourquoi je recevais une connexion a refusé une erreur avant que la même chose ne fonctionne pas à présent.