Front end-"Some pits when vue accesses the background interface

This is the situation.

The back-end springboot interface is managed with shiro permissions. I want to remember the password and automatically log in within 24 hours when I log in. Shiro provides rememberMe's remember password manager to help us realize automatic login.

Let me talk about the first pit first. Cross-domain, this is nothing to say, this is not a special pit, just follow the configuration below.

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CustomCORSConfiguration {
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*"); // 允许任何的head头部
        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
        corsConfiguration.addAllowedMethod("*"); // 允许任何的请求方法
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    // 添加CorsFilter拦截器，对任意的请求使用
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

}

Besides the first pit, this is a huge pit. Request to carry cookies

I injected CookieRememberMeManager to remember the password manager in ShiroConfig. In this process, the remember password manager will create a cookie named rememberMe, and I set the maxAge of this cookie to one day, and at the same time I log in new UsernamePasswordToken(username, password, true), change the third parameter that is whether to automatically log in to true. According to the urgency of using layui in the past, after logging in, the system will create two parameters on the front end, one is called JSESSIONID and the other is called rememberMe. as follows:

But after successfully logging in on my vue login interface,

The following problems occurred:

1: These two parameters are not in the cookie.

2: At the same time, when performing authorization authentication, the system only uses the login authentication interface of ShiroRealm, not the authorization authentication interface. WTF? (Too angry to find out the reason after searching for a long time)

3: Open the network of Google's developer debugging mode and find that there is no cookie in the request (this is the most terrible point).

So what is the reason.

Axios request does not carry cookies by default. I need to turn it on manually. Just set the attribute withCredentials equal to true. One attribute solves three problems. as follows

(Additionally, on the picture, axios intercepted the request header and set up a header named Authorization, which has nothing to do with shiro. This is how I set up token interception verification in swagger, which seems to be explained in the previous swagger-related blog)

Let's talk about the third pit. Transfer data in x-www-form-urlencoded format

In the above picture, I set content-type:'application/json' in the interceptor.

But it didn't actually play a role. After I remove the content-type in this interceptor, the request is still in the default json format.

Of course, the vast majority of requests are in json format, there is no problem, but I have a backend of the post interface with parameters bound through the @ModelAttribute annotation. The default json format makes me unable to get this parameter. At this time, I need to change the request format to application/x-www-form-urlencoded.

But how to change it is to wrap the parameter object product that was originally to be passed to the background in the data with new URLSearchParams (product).

Front end-"Some pits when vue accesses the background interface

Guess you like