HTTP POST se transforme en OPTIONS AngularJS

Question

J'essaie de soumettre un formulaire de connexion à une Api de repos, en traduisant mon code Jquery/Javascript en AngularJS. J'essaie d'utiliser $http pour envoyer la demande, mais lorsque je soumets le formulaire, la demande POST se transforme en OPTIONS et aucun paramètre de demande n'est transmis. Voici mon code :

controller.formData = {
    username :  $scope.formData.username,
    password :  $scope.formData.password,
};
$http({
      method  : 'POST',
      url     : 'http://localhost:8080/multe-web/signin',
      data    : controller.formData,  
      headers : { 'Content-Type': 'application/json' }  
     })
    .success(function(data) {
        console.log(data);
     });

Voici une capture d'écran de la console du navigateur.

Pourquoi aucun paramètre n'est passé à la requête HTTP POST ?

Quelqu'un peut-il m'aider ?

Answer 1

Si vous essayez de faire une demande d'origine croisée, cela peut être une ' demande de pré-vol ' :

Voir ce billet : Comment désactiver la requête OPTIONS ?

Answer 2

Cette demande est appelée "demande de contrôle préalable". Elle s'ajoute lorsque vous essayez d'accéder à une ressource qui provient d'un autre domaine. Pour plus d'informations, vous pouvez rechercher Cross-origin resource sharing (CORS). Pendant la demande de contrôle préalable, vous devriez voir des en-têtes commençant par Access-Control-Request-* Ces en-têtes de demande demandent au serveur les autorisations nécessaires pour effectuer la demande proprement dite. Votre réponse de contrôle en amont doit reconnaître ces en-têtes pour que la demande réelle fonctionne.

Answer 3

Le site OPTIONS que vous voyez est une requête pré-volatile initiée par le navigateur. Cela se produit en raison de CORS qui signifie "CROSS ORIGIN RESOURCE SHARING".

Demandes pré-volées

Dans votre cas, votre serveur dorsal doit accuser réception de l'adresse de l'utilisateur. OPTIONS et renvoyer un 200. Ce n'est qu'alors que le navigateur déclenche le véritable POST demande

Voici quelques liens pour vous aider à démarrer
Politique d'origine identique
AngularJS et CORS
Question similaire sur le SO

Answer 4

Vous devez définir un filtre CORS sur votre backend. Je ne sais pas quel langage vous utilisez mais un exemple dans spring framework (java) serait le suivant.

import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, cache-control, content-type, Origin, key");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }
}

En gros, vous affirmez que response.setHeader("Access-Control-Allow-Origin", "*"); peut provenir de n'importe quel domaine. (dans un environnement de production, vous limiteriez bien sûr cette possibilité à vos domaines connus).

En mettant en œuvre ce filtre, votre demande d'options passera sans problème.

L'appel d'options est quelque chose que le navigateur fait automatiquement et vous ne voulez vraiment pas le désactiver comme le suggèrent certaines autres réponses.

Bien à vous