AEM 6.3: Error 500 while doing a POST request

I have created a POST servlet like below:

package com.aem.sites.servlets;

import org.apache.sling.api.servlets.SlingAllMethodsServlet;

import org.osgi.service.component.annotations.Activate;

import org.osgi.service.component.annotations.Component;

import org.osgi.service.component.annotations.Modified;

import org.osgi.service.metatype.annotations.Designate;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import com.aem.sites.interfaces.SubscriptionConfiguration;

import java.io.IOException;

import javax.servlet.Servlet;

import javax.servlet.ServletException;

import org.apache.sling.api.SlingHttpServletRequest;

import org.apache.sling.api.SlingHttpServletResponse;

@Component(

immediate = true,

service = Servlet.class,

configurationPid = "com.aem.sites.servlets.SubscriptionSevlet",

property = {

"sling.servlet.methods=POST",

"sling.servlet.selectors=newsletters",

"sling.servlet.resourceTypes=aemsite-project/components/structure/page",

"sling.servlet.extensions=html"

}

)

@Designate(ocd=SubscriptionConfiguration.class)

public class SubscriptionSevlet extends SlingAllMethodsServlet{

/**

*

*/

private static final long serialVersionUID = 1L;

/** The Constant logger. */

private final Logger logger = LoggerFactory.getLogger(this.getClass());

@Override

protected void doPost(final SlingHttpServletRequest req, final SlingHttpServletResponse res) throws IOException, ServletException {

logger.info("======================inside do post for subscription servlet========================================");

}

/**

* Activate.

*

* @param config the config

*/

@Activate

    @Modified

    protected void Activate(SubscriptionConfiguration config) {

logger.info("********************************inside subscription servlet*****************************************"+config.sampleProperty());

    }

}

and this is the configuration Interface

package com.aem.sites.interfaces;

import org.osgi.service.metatype.annotations.AttributeDefinition;

import org.osgi.service.metatype.annotations.AttributeType;

import org.osgi.service.metatype.annotations.ObjectClassDefinition;

@ObjectClassDefinition(name="Subscription Configuration", description="Configuration interface for Subscription Servlet")

public @interface SubscriptionConfiguration {

@AttributeDefinition(

        name = "Sample property",

        description = "Sample property",

        type = AttributeType.STRING

    )

public String sampleProperty() default "sample test";

}

I am calling the servlet using resourceType and selector.The servlet is being called through a form:

<div id="login-box" style="padding-top:5%;padding-left:3%">

  <div class="left">

    <h1>Sign up</h1>

    <form method="POST" name="subscriptionForm" id="subscriptionForm" action="/content/aemsite/en/subscribe.newsletters.html">

    <input type="text" name="name" placeholder="Name" style="width:30%" />

    <input type="text" name="email" placeholder="E-mail" style="width:30%"/>

    <input type="submit" name="signup_submit" value="Sign me up" />

    </form>

  </div>

</div>

this is the JS being included through clientlibs

$(function() {

var formURL = $("#subscriptionForm").attr('action');

var method = $("#subscriptionForm").attr('method');

$("#subscriptionForm").submit(function(event) {

event.preventDefault();

$.ajax({

url:formURL,

data: $("#subscriptionForm").serialize(),

type: method,

success: function( data, textStatus, jQxhr ){

        $('#response pre').html( data );

    },

    error: function( jqXhr, textStatus, errorThrown ){

        console.log( errorThrown );

    }

});

});

});

The clientlibs that are being included as dependencies are given in the screenshot clientlibs.png below

The above is the error I am seeing on the chrome debuuger is  "Failed to load resource: the server responded with a status of 500 (Server Error)"

The screenshot is given below:

I have read that from AEM 6 onwards more security measures are being adopted for POST request and hence a CSRF token is being used but it is mostly handled if AEM's version of jQuery is used.

I have also used jcrresolver to check if the path is being resolved and here is the screenshot attached of that:

The servlet's status is also active.

I am not sure what is it that I am doing incorrectly. Any help is appreciated.

Thanks