Sending Authorization Token Bearer through Javascript

Question

I'm trying to send a Authorization Token Bearer through Javascript to a REST Endpoint, so i doing in this way:

$.ajax( {
    url: 'http://localhost:8080/resourceserver/protected-no-scope',
    type: 'GET',
    beforeSend : function( xhr ) {
        xhr.setRequestHeader( "Authorization", "Bearer " + token );
    },
    success: function( response ) {
        console.log(response);
    }

My endpoint is running under a SpringBoot container, so i'm getting the HttpServletRequest and trying to get AUthorization Header but is always null:

static Authentication getAuthentication(HttpServletRequest request) {
        String token = request.getHeader(HEADER_STRING);
        //token is always null
...

Edit 1 This is the error in Client-Side (Browser

OPTIONS http://localhost:8080/resourceserver/protected-no-scope 403 ()
Failed to load http://localhost:8080/resourceserver/protected-no-scope: Response for preflight has invalid HTTP status code 403.

Edit 2 To enable CORS in backend i'm using the following annotation with spring:

@RestController
@CrossOrigin(origins = "*", maxAge = 3600, allowCredentials = "true", allowedHeaders = "Authorization", methods =
        {RequestMethod.GET, RequestMethod.OPTIONS, RequestMethod.POST})
public class MyResource {

Edit 3 I tried added the CORS in my Filter but no success:

public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain)
            throws IOException, ServletException {

        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        HttpServletResponse httpServletResponse = (HttpServletResponse) response;

        httpServletResponse.setHeader("Access-Control-Allow-Origin", httpServletRequest.getHeader("Origin"));
        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");


        Authentication authentication = TokenAuthenticationService
                .getAuthentication(httpServletRequest);

        SecurityContextHolder.getContext().setAuthentication(authentication);
        filterChain.doFilter(request, response);
    }

Possible duplicate of [Add Header in AJAX Request with jQuery](https://stackoverflow.com/questions/10093053/add-header-in-ajax-request-with-jquery) — Paul, Jul 24 '18 at 19:57
Yeah, but i already solved it using this in spring-boot: @CrossOrigin(origins = "*", maxAge = 3600, allowCredentials = "true", allowedHeaders = "Authorization", methods = {RequestMethod.GET, RequestMethod.OPTIONS, RequestMethod.POST}) — Ronaldo Lanhellas, Jul 24 '18 at 20:05
HTTP status 403 is Forbidden; sounds like you might need something else on the server-side. — Heretic Monkey, Jul 24 '18 at 20:15
Yeah, i need the Token (JWT TOKEN), but if is null i got 403 Forbidden, the server response is correct. — Ronaldo Lanhellas, Jul 24 '18 at 20:16
It shouldn't need the token for the OPTIONS preflight; if it does, something's wrong with that server-side code. I don't know anything about spring-boot. — Heretic Monkey, Jul 24 '18 at 20:31

Zohaib Ijaz · Accepted Answer · 2018-07-24T20:20:16.430

32

You can use headers key to add headers

$.ajax({
   url: 'http://localhost:8080/resourceserver/protected-no-scope',
   type: 'GET',
   contentType: 'application/json'
   headers: {
      'Authorization': 'Bearer <token>'
   },
   success: function (result) {
       // CallBack(result);
   },
   error: function (error) {

   }
});

You need to enable CORS on backend

https://stackoverflow.com/a/32320294/5567387

edited Jul 24 '18 at 20:20

answered Jul 24 '18 at 19:59

Zohaib Ijaz

21,926
7
38
60

I tried but continue returning null in my java endpoint. I know that problem is not in java server because if i use postman and send a request with Authorization Bearer Token everything works. – Ronaldo Lanhellas Jul 24 '18 at 20:02
You can also copy code generated by POSTMAN and try that https://www.getpostman.com/docs/v6/postman/sending_api_requests/generate_code_snippets – Zohaib Ijaz Jul 24 '18 at 20:12
I edited my post with error in client-side (browser) – Ronaldo Lanhellas Jul 24 '18 at 20:12
which means there is CORS issue. Fix on server side – Zohaib Ijaz Jul 24 '18 at 20:13
debugging my server-side i need this token to validate the request but as i said, this token is always null. – Ronaldo Lanhellas Jul 24 '18 at 20:15
1

Because browsers don't allow cross origin ajaz calls, copy code generated by POSTMAN and if you still face same issue then it's sure it's CORS issue. Allow your host and required headers on backend. – Zohaib Ijaz Jul 24 '18 at 20:19
@RonaldoLanhellas Have a look at this, https://stackoverflow.com/a/32320294/5567387 also you have not shared your backend code, how are you handling CORS issue – Zohaib Ijaz Jul 24 '18 at 20:20
I tried with code generated by POSTMAN and i have same issue. So i can understand thaet is a CORS issue, do you have any tip how can i allow this i spring-boot ? – Ronaldo Lanhellas Jul 24 '18 at 20:21
I added a link in my answer but google is your friend. – Zohaib Ijaz Jul 24 '18 at 20:21
I already added a CORS Config in backend, saw my editied post please – Ronaldo Lanhellas Jul 24 '18 at 20:24
Try this https://spring.io/blog/2015/06/08/cors-support-in-spring-framework – Zohaib Ijaz Jul 24 '18 at 20:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176676/discussion-between-ronaldolanhellas-and-zohaib-ijaz). – Ronaldo Lanhellas Jul 24 '18 at 20:30
This link https://spring.io/blog/2015/06/08/cors-support-in-spring-framework resolved my problem – Ronaldo Lanhellas Jul 24 '18 at 20:35
1

For the comment 'You can also copy code generated by POSTMAN and try that', the resource has moved to another location: https://learning.postman.com/docs/postman/sending-api-requests/generate-code-snippets/ – Cyril Jun 11 '20 at 14:15

score 3 · Answer 2 · answered Oct 14 '22 at 05:33

Sending the request with Fetch API

fetch('http://localhost:8080/resourceserver/protected-no-scope', { 
    method: 'GET', 
    headers: new Headers({
        'Authorization': 'Bearer <token>',
        'Content-Type': 'application/x-www-form-urlencoded'
    })
});

score 0 · Answer 3 · edited Jan 11 '23 at 16:29

0

Before https.get use authorization in header.

const options = {
  headers: {
    'Authorization': 'Bearer token'
  }
}

https.get(url, options, function(res) {
  console.log(res.statusCode);
})

edited Jan 11 '23 at 16:29

Tyler2P

2,324
26
22
31

answered Jan 11 '23 at 04:53

Ali

1

Sending Authorization Token Bearer through Javascript

3 Answers3

Linked