Question

我正在尝试从Vue.js实例调用某些Web服务，但遇到了一些问题。 Web服务是用springboot创建的。在遇到一些CORS麻烦之后，到目前为止，它似乎运行良好。但是现在，当其他（GET，DELETE）工作正常时，我的POST和PATCH将无法工作。

在调用POST或PATCH请求时，我收到403（禁止）响应。

这是服务器端的配置：

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

我可以接受所有调用的WebConfig，无论其来源或方法

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("*");
    }
}

还有控制器：

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

这是客户端的通话示例：

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

我不明白哪里出了问题。正如我所说，只有POST和PATCH无法使用。 GET和DELETE工作正常。使用PostMan测试我的Web服务时，我也没有任何问题。...

Answer 1

问题来自于对axios.post的呼叫。 post，put和patch的第二个参数是数据，第三个参数是选项。这些选项显然是作为数据发送的。

正确的方法是创建一组数据（通过创建json字符串或使用URLSearchParams）并将其放置为调用后的第二个参数。

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

禁止从Vue.js应用程序调用Web服务

1 个答案: