2017-09-15 3 views
1

Je rencontre des problèmes majeurs pour comprendre pourquoi l'API Fetch ne me permet pas d'envoyer une requête POST à ​​mon serveur de restify.POST demande à restify avec Fetch API ne fonctionne pas

J'ai un serveur de base de redressement avec une route qui reçoit des requêtes POST sur /login.

Cette route fonctionne parfaitement comme prévu si je test avec Postman ou HTTPRequester, mais quand je teste alors sur une application de navigateur avec l'API chercher, je reçois l'erreur suivante (Chrome):

OPTIONS http://localhost:1337/login 405 (Method Not Allowed) 

Fetch API cannot load http://localhost:1337/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 

Deux problèmes

  1. J'utilise spécifiquement la méthode POSt dans ma demande, alors pourquoi soudainement OPTIONS? J'ai déjà réglé Access-Control-Allow-Origin: * sur mon serveur.

EDIT: J'utilise V5.2.0 restify

Mon application serveur:

const restify = require('restify'); 
 
const app = restify.createServer({ 
 
    'name': 'API Token Test', 
 
    'version': '1.0.0' 
 
}); 
 

 
app.use(restify.plugins.acceptParser(app.acceptable)); 
 
app.use(restify.plugins.bodyParser()); 
 
app.use(restify.plugins.jsonp()); 
 

 
app.use((req, res, next) => { 
 
\t res.header('Access-Control-Allow-Origin', '*'); 
 
\t res.header('Access-Control-Allow-Headers', 'X-Requested-With'); 
 
\t return next(); 
 
}); 
 

 
app.post('/login', (req, res) => { 
 
    db.execute('SELECT idusers, password FROM users WHERE username = ?', [req.body.username], (selError, rows) => { 
 
     if (passwordHash.verify(req.body.password, rows[0].password)) { 
 
      crypto.randomBytes(256, (err, buf) => { 
 
       if (err) return res.status(500).end(); 
 
       else { 
 
        const token = buf.toString('hex'); 
 
        db.execute('INSERT INTO accesstokens SET userid = ?, token = ?', [rows[0].idusers, token], (insError) => { 
 
         if (insError) return res.status(500).end(); 
 
         else return res.send({ "AccessToken": token }); 
 
        }); 
 
       } 
 
      }); 
 
     } else { 
 
      res.status(401).end(); 
 
     } 
 
    }); 
 
}); 
 

 
app.listen(1337);

(je l'ai laissé des étoffes mysql et Crypto/mot de passe-hash -requires, qui sont sans rapport avec le problème)

Et mon script clientside:

(() => { 
 
    document.addEventListener('DOMContentLoaded',() => { 
 
     const form = document.querySelector('.loginForm'); 
 

 
     form.onsubmit =() => { 
 
      const data = JSON.stringify({ 
 
       'username': form.username.value, 
 
       'password': form.password.value 
 
      }); 
 

 
      let headers = new Headers(); 
 
      headers.set('Accept', 'application/json'); 
 
      headers.set('Content-Type', 'application/json'); 
 
      headers.set('Content-Length', data.length); 
 

 

 
      fetch('http://localhost:1337/login', { 
 
       'method': 'POST', 
 
       'headers': headers, 
 
       'mode': 'cors', 
 
       'cache': 'default', 
 
       'body': data 
 
      }) 
 
       .then((result) => result.json()) 
 
       .then((data) => { 
 
        console.log(data); 
 
        localStorage.setItem('token', data); 
 
       }) 
 
       .catch((err) => { 
 
        console.log(err); 
 
       }); 
 

 
      return false; 
 
     }; 
 
    }); 
 
})();

Répondre

1

Apparaît tout le soutien CORS a été déplacé vers this module depuis restify v5.x.

Installation restify-CORS-middleware et en ajoutant ce qui suit à mon application travaillé:

const corsMiddleware = require('restify-cors-middleware'); 
const cors = corsMiddleware({ 
    'origins': ['*'] 
}); 
app.pre(cors.preflight); 
app.use(cors.actual);