Calls to webservices from Vue.js app are forbidden - spring-boot

Question

I am trying to call some webservices from a Vue.js instance, and I'm facing some issues.
Webservices are made with springboot. After having some CORS troubles, it seemed to work well so far. But now, my POST and PATCH won't work when other (GET, DELETE) work fine.
When calling a POST or PATCH request, I receive a 403 (forbidden) response.
This is the configuration on the server side:
#Configuration
#EnableWebSecurity
#EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
#Autowired
private JwtTokenDecoder jwtTokenDecoder;
#Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.httpBasic().disable()
.formLogin().disable()
.logout().disable()
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
// Install the JWT authentication filter
http.addFilterBefore(new JwtAuthenticationFilter(jwtTokenDecoder), BasicAuthenticationFilter.class);
// Authorize only authenticated requests
http.authorizeRequests()
.anyRequest().authenticated();
http.cors();
}
}
And the WebConfig where I accept all calls, whatever the origin or the method
#Configuration
#EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*");
}
}
And the controller :
#RestController
#RequestMapping("/admin")
#Api("Administration API")
#CrossOrigin(origins = "*")
class AdminController {
#PostMapping("/user")
#PreAuthorize("hasRole('Administrator')")
public User createUser(#RequestBody String userJson,
Authentication authentication) {
EvidenzAuthentication evidenzAuthentication = (EvidenzAuthentication) authentication;
JsonObject dataAsJSON = new JsonParser().parse(userJson).getAsJsonObject();
User u = new User();
u.setFirstName((dataAsJSON.has("firstName") ? dataAsJSON.get("firstName").getAsString() : ""));
u.setLastName((dataAsJSON.has("lastName") ? dataAsJSON.get("lastName").getAsString() : ""));
u.setEmail((dataAsJSON.has("email") ? dataAsJSON.get("email").getAsString() : ""));
u.setProfileId((dataAsJSON.has("profile") ? dataAsJSON.get("profile").getAsString() : ""));
u.setIssuerId(evidenzAuthentication.getIssuerId());
if (userDao.createUser(u).isPresent()) {
return userDao.createUser(u).get();
} else {
return null;
}
}
}
This is an exemple of call on the client side :
axios.post('/admin/user',
{data: "firstName":"Peter","lastName":"Sellers","email":"peter.sellers#party.com","profile":"Reader"},
crossDomain: true,
headers: { 'Content-Type': 'application/json',
'Cache-Control': 'no-cache',
'Authorization': 'Bearer ' + localStorage.getItem('auth_token') }})
.then(response => {
self.submitStatus = "OK";
})
.catch(function (error) {
console.log(error)
});;
I don't understand what is wrong. As I said, only POST and PATCH won't work. GET and DELETE work just fine.
When testing my webservices with PostMan, I don't have any problem either....

Answer 1

The problem came from the call to axios.post.
The second argument for post, put and patch is the data, and the third is the options.
The options were send as data, which wasn't correct, obviously.
The correct way to do it is to create a set of data (either by creating a json string, or by using URLSearchParams) and place it as second argument of post call.
const params = new URLSearchParams();
params.append('firstName', this.currentUser.firstName);
params.append('lastName', this.currentUser.lastName);
params.append('email', this.currentUser.email);
params.append('profile', this.currentUser.profileId);
axios.post('/admin/user',
params,
{headers: {'Authorization': 'Bearer ' + localStorage.getItem('auth_token')}});