Home » Java » java – How do you include a CSRF token in a Vue.js application with a Spring Boot backend?-Exceptionshub

java – How do you include a CSRF token in a Vue.js application with a Spring Boot backend?-Exceptionshub

Posted by: admin February 25, 2020 Leave a comment


I’m trying to do a POST request to my backend REST API using the browser’s Fetch API like this:

   submitRegistration() {
         const formElement = document.getElementById('register-form');
         fetch('http://localhost:8080/register', {
             method: 'POST',
             body: new FormData(formElement),

I’m taking the data from this form:

<v-form id="register-form" @submit.prevent="submitRegistration" class="text-center" ref="form" v-model="valid" lazy-validation>
    <v-text-field type="text" name="username" v-model="form.username" :counter="25" :rules="usernameRules" label="Username" required></v-text-field>
    <v-text-field type="password" name="userPassword" v-model="form.password" :counter="25" :rules="passwordRules" label="Password" required></v-text-field>
    <v-text-field type="text" name="userEmail" v-model="form.email" :rules="emailRules" label="E-mail" required></v-text-field>
    <v-btn type="submit" text class="primary">Register</v-btn>

However, as a response I get 403 Forbidden by my backend server. The problem is the CSRF token but I have no idea how to generate it to include it in the POST request to the backend API.

EDIT: In Spring Boot, my CORS mapping is configured like this:

public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        public void addCorsMappings(CorsRegistry registry) {

I’m posting this because the Response object that is returned gives me a 403 status and is of type “cors” even though the error is resolved if I completely disable CSRF using HttpSecurity – http.csrf().disable();

How to&Answers:

This could be solved by making a GET call first to the server and then following the solution here with the following additions / corrections:

  1. In the submitRegistration() method, add the following at the top:

        // Do a fetch to GET the XSRF-TOKEN as a cookie
        const csrfToken = this.getCookie('XSRF-TOKEN');
        const headers = new Headers({
            'X-XSRF-TOKEN': csrfToken
  2. Our POST request now looks like this:

       fetch('http://localhost:8080/register', {
            method: 'POST',
            credentials: 'include',
            body: new FormData(formElement),
  3. In the backend, we need to add the following to our overriden configure() method:

    protected void configure(HttpSecurity http) throws Exception {

    This tells the server to send back the CSRF token as a cookie called “XSRF-TOKEN” and reads the CSRF token from a header called “X-XSRF-TOKEN”.