2
votes

Comment définir l'en-tête d'autorisation dans vue.js

Je fais un post-call axios avec le jeton JWT généré après une connexion réussie. Pour toutes les demandes, j'ai besoin d'attacher le jeton JWT dans l'en-tête et dans le back-end qui est développé sur spring -boot, j'ai la logique d'obtenir le jeton de l'en-tête et de le valider.

Depuis le navigateur, la requête OPTIONS commence par au back-end où cela me donne une erreur 403 et dans le back-end Si je sysout les en-têtes, je ne trouve pas le nom d'en-tête X-XSRF-TOKEN

@Controller
@CrossOrigin(origins = "*", allowedHeaders = "*")
@RequestMapping(path = "/api/v1")
public class ApplicationController {
    @PostMapping(path = "/getdata")
    @ResponseBody
    public SessionData getData(@RequestBody ProfileRequest profileRequest) {
        try {
            return profileService.getData(profileRequest);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
}

Spring partie de démarrage

axios.post("http://localhost:8004/api/v1/auth", { "username": "test", "password" : "test"})
.then((response) => {
    let token = response.data.token;
    axios.defaults.headers.common["X-XSRF-TOKEN"] = token;
    axios.post("http://localhost:8004/api/v1/getdata", {"action" : "dashboard"})
    .then((response) => {
        console.log(response.data);
    }, (error) => {
        console.log(error);
    })
}, (error) => {
    console.log(error);
})

axios spring-boot vue.js spring-security

0 commentaires

3 Réponses :

1
votes

La définition de l'en-tête d'autorisation n'a rien à voir avec vue, mais est quelque chose à voir avec axios.
axios.post("http://localhost:8004/api/v1/getdata", {"action" : "dashboard"}, {
   headers: {
      Authorization: 'Bearer ' + token,
   }
})

4 commentaires

J'ai essayé ça avant. Ça n'a pas marché. Je ne vois aucun en-tête défini dans la demande OPTIONS

pouvez-vous vérifier la demande réseau pour les informations d'en-tête de la demande, peut-être pourriez-vous utiliser le panneau réseau des outils de développement Chrome et vérifier si vous obtenez correctement l'en-tête dans la demande

Je ne vois aucun en-tête

Avez-vous vérifié si vous avez ajouté des OPTIONS à votre configuration CORS? configuration.addAllowedMethod (HttpMethod.OPTIONS);

0
votes

Lorsque vous obtenez le jeton d'authentification, vous pouvez configurer l'instance axios avec:

axios.defaults.headers.common ['Authorization'] = `Porteur $ {token}`

common signifie appliquer l'en-tête à chaque requête suivante, tandis que vous pouvez également utiliser d'autres noms de verbes HTTP si vous souhaitez appliquer un en-tête à un seul type de requête:

axios.defaults.headers.post ['Content-Type'] = 'application / x-www-form-urlencoded'

Vous trouverez plus d'informations dans https://github.com/axios/axios#config -par défaut

3 commentaires

lorsque je définis les en-têtes, cela n'apparaît pas dans les outils de développement Chrome -> réseau -> En-têtes de demande

Pouvez-vous mettre à jour votre question avec la partie du code où vous recevez le jeton et le configurez dans axios?

Je pense que axios.defaults.headers.common ["X-XSRF-TOKEN"] = token; devrait être axios.defaults.headers.common ["Authorization"] = 'Bearer' + jeton;

0
votes

...
axios.post('http://localhost:8004/api/v1/auth', 
{ "username": "test", "password" : "test"}, {headers: { X-XSRF-TOKEN: `${token}`}})
...
the issue might not be axios but the cors policy set by spring security.If you are using spring security check out this answerI had the same issue, that answer helped solve my problem.

0 commentaires