4

I'm making an axios post call with the JWT token generated after successful login. For all the requests I need to attach JWT token in header and in the back-end which is developed on spring -boot I have logic to get the token from header and validate it.

From the browser, first the OPTIONS request goes to back-end where it gives me 403 error and in the back-end If I sysout headers, I can't find the header name X-XSRF-TOKEN

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);
})

Spring boot part

@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;
        }
    }
}
Krishna
  • 1,089
  • 5
  • 24
  • 38

3 Answers3

4

Setting Authorization Header is not something to do with vue, but it is something to do with axios.

axios.post("http://localhost:8004/api/v1/getdata", {"action" : "dashboard"}, {
   headers: {
      Authorization: 'Bearer ' + token,
   }
})
gokublack
  • 1,260
  • 2
  • 15
  • 36
  • I tried this before. It didn't work. I do not see any headers set in OPTIONS request – Krishna May 10 '19 at 11:32
  • can you check the network request for the request header information, perhaps you could use chrome developer tools network panel and check whether you get the header properly in the request – gokublack May 10 '19 at 11:38
  • I don't see any headers – Krishna May 10 '19 at 11:49
  • Did you check if you added OPTIONS to your CORS configuration? `configuration.addAllowedMethod(HttpMethod.OPTIONS);` – Viorel Dec 03 '19 at 09:11
0

When you get the auth token you can configure the axios instance with:

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

common means applying the header to every subsequent request, while you can also use other HTTP verb names if you want to apply a header to only one request type:

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

You will find more info in https://github.com/axios/axios#config-defaults

Nartub
  • 3,302
  • 1
  • 14
  • 10
  • when I set the headers, it is not showing up in the chrome developer tools -> network -> Request headers – Krishna May 10 '19 at 13:54
  • Can you update your question with the portion of the code where you are receiving the token and configuring it in axios? – Nartub May 10 '19 at 14:08
  • I think `axios.defaults.headers.common["X-XSRF-TOKEN"] = token;` should be `axios.defaults.headers.common["Authorization"] = 'Bearer ' + token;` – Nartub May 14 '19 at 12:18
0
...
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 answer

I had the same issue, that answer helped solve my problem.

Neco Horne
  • 148
  • 2
  • 8