Send jquery request like Postman

Question

I tried to send some post methods from my javascript file but something goes wrong and script doesn't work. My html file is:

<html>
    <head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script>
    $( document ).ready(function() {
        var request = $.ajax({
            method: "POST",
            url: "http://localhost:8081/login",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: { username: "John", password: "Boston" }
        })
        .done(function( msg ) {
          alert( "Done: " + msg );
        })
        .fail(function( jqXHR, textStatus ) {
          alert( "Request failed: " + textStatus );
        });
    });
    </script>
    </head>
    <body>
    </body>
</html>

I use spring-boot for server and want to check permission by using JWT. So I overided attemptAuthentication method from AbstractAuthenticationProcessingFilter class:

@Override
public Authentication attemptAuthentication(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)
        throws AuthenticationException, IOException, ServletException {
    String contentType = httpServletRequest.getContentType();
    String headerPart = httpServletRequest.getHeader("Accept");
    String body = httpServletRequest.getReader().lines().collect(Collectors.joining(System.lineSeparator()));
    AccountCredentials credentials = new ObjectMapper().readValue(httpServletRequest.getInputStream(),AccountCredentials.class);
    UsernamePasswordAuthenticationToken token = new UsernamePasswordAuthenticationToken(credentials.getUsername(), credentials.getPassword());
    return getAuthenticationManager().authenticate(token);
}

if I send request from html file body and contentType are empty and headerpart is text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

However when the request method is sended from Postman - everything works perfectly(so contentType is text/plain;charset=UTF-8 and body is {"username":"admin","password":"admin"}), here is my Postman configuration:

It is possible that I misunderstood something but have no idea why my request from jquery is not the same. Is there any solutions for this?

You can try using datatype of ajax request as dataType : "text" instead of dataType : "json".The type of data that you're expecting back from the server. — Avi, Feb 20 '17 at 20:11

score 0 · Answer 1 · edited May 23 '17 at 12:17

Successful Postman requests indicate that your backend is properly set up. Your request methods though might be at fault. Remove the variable binding that you use on line 5.

JQuery AJAX syntax here is a link to a similar question. https://www.w3schools.com/jquery/ajax_ajax.asp a link to the w3 schools use cases.

Your code should look like this:

 $( document ).ready(function() {
    $.ajax({
        method: "POST",
        url: "http://localhost:8081/login",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: { username: "John", password: "Boston" }
    })
    .done(function( msg ) {
      alert( "Done: " + msg );
    })
    .fail(function( jqXHR, textStatus ) {
      alert( "Request failed: " + textStatus );
    });
});

Send jquery request like Postman

1 Answers1