express app.get ('/ *') und api CORs Problem

Question

können Sie mir sagen, wie ich meine JSON API bekommen kann?

server.js

app.get('/*', function(req, res) { 
    res.sendFile(path.join(__dirname, 'public', 'index.html')); 
}) 

app.get('/api', function(req, res) { 
    res.header() 
res.json({'message' : 'hi this is my json obj'}); 
}) 

App.js

class App extends React.Component { 
    componentDidMount() { 
    // let foo; 
    axios.get('http://localhost:3000/api') 
     .then(res => { 
     console.log(res.data); 
     res.data.message; 
    }) 
    .catch(err => { 
     console.log(err); 
    }) 
    } 

Aus irgendeinem Grund, wie, dass ich Router localhost den Zugriff reagieren zu erreichen: 3000/Armaturenbrett ganz gut durch das URL-Feld inputing. Es wird immer HTML-String zurückgegeben. was kann ich ändern, um es so zu machen, dass ich json objekt statt html string empfangen kann?

Answer 1

Sie haben Cors Problem, weil Sie versuchen, die Daten von dieser URL http://localhost:3000/api abrufen, und das ist ganz normal. Die Sache ist, dass, wenn Sie Ihre Anwendung von einem anderen Server bedienen (nehmen wir Port 80 für Apache) ist es normal, dass Sie auch das Kors Problem haben.

Eine Möglichkeit, dies zu umgehen, ist durch eine Middleware-Registrierung vor allen Routen Registrierung:

app.use(function (req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 

app.get('/*', function (req, res) { 
    res.sendFile(path.join(__dirname, 'public', 'index.html')); 
}) 

app.get('/api', function (req, res) { 
    res.header() 
    res.json({ 'message': 'hi this is my json obj' }); 
}) 

Statt Ihre eigene Middle schaffen Sie das cors Modul verwenden können, und registrieren Sie es wie folgt aus:

var cors = require('cors'); 
app.use(cors()); 

bewusst sein, dass so etwas zu tun:

res.header("Access-Control-Allow-Origin", "*"); 

sein kann Ein bisschen gefährlich für Ihren Server, weil andere Anwendungen Ihre API ohne Probleme direkt vom Browser aus benutzen können. Es gibt einen Grund, dass Kors vorhanden ist und ich würde vorschlagen, darüber zu studieren.

EDIT

By the way, wenn Sie Ihre api dienen und Ihre reagieren Anwendung von demselben Knoten Server dann nur durch diese ersetzt ein:

axios.get('http://localhost:3000/api') 

mit dieser:

axios.get('/api') 

sollte funktionieren

Answer 2

Sie müssen die Reihenfolge der Route Erklärung wechseln:

app.get('/api', function(req, res) { 
    res.header() 
    res.json({'message' : 'hi this is my json obj'}); 
}) 

app.get('/*', function(req, res) { 
    res.sendFile(path.join(__dirname, 'public', 'index.html')); 
}) 

Das ist, weil /* wird auch Spiel /api und Express basiert nicht überein, auf der Strecke besten passt, aber die Route übereinstimmt erste.

Immer spezifischere Routen vor weniger spezifischen Routen angeben.