Springboot跨域解决与请求参数

Springboot跨域解决与请求参数

跨域问题：为了安全浏览器不允许不同的域名、端口、协议之间获取资源。

解决方法多种，可以前端配置或者Nginx将域名变得一样，也可以后端过滤器处理。

一、后端处理跨域

两种方法：

1、自定义类，注入CorsWebFilter

@Configuration
public class UserCorsWebFilter{
     

@Bean
public CorsWebFilter corsWebFilter(){
     
        //配置信息
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");//哪些头
        corsConfiguration.addAllowedMethod("*");//哪些方式 get post 。。。
        corsConfiguration.addAllowedOrigin("url");//从哪个域名来的请求 不要写 * 会报错
        corsConfiguration.setAllowCredentials(true);//允许cookie

        //任意路径都可以跨域
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(urlBasedCorsConfigurationSource);
    }
}

2、重写WebMvcConfigurer接口的addCorsMappings方法

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
     
    @Override
    public void addCorsMappings(CorsRegistry registry) {
     
        registry.addMapping("/**")
                .allowedOrigins("url")
                .allowCredentials(true)
                .allowedMethods("*")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

3、坑

addAllowedOrigin("url");//从哪个域名来的请求 不要写 * 会报错

Access to XMLHttpRequest at 'http://localhost:8084/' from origin 'http://localhost:8089' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Origins写具体的url不要写 *

4、@CrossOrigin注解与自定义的区别

@CrossOrigin和WebMvcConfigurer接口的addCorsMappings相似，怀疑是对其进行的封装，设定了默认值基本上是全部即“*”，不允许前端cookie跨域，但是没看源码瞎猜哈哈，@CrossOrigin也可以修改参数达到自定义的效果，但是如果默认要注意上面提到的坑，有可能会遇到，尤其是post请求，data自定义的。

二、接收前端传过来的参数

实际上一般@CrossOrigin就够了，但是前端post请求比较麻烦，就需要处理一下。

例：

login() {
     
      this.verify();
      this.$http({
     
        method: "post",
        url: "url",
        headers: {
     
          "content-type": "application/json",//multipart/form-data
        },
        data: {
     
          username: this.username,
          password: this.password,
          code: this.code,
        },
        withCredentials: true,
      }).then((res) => {
     
        console.log(res.data);
      });
    },

上面的代码没问题，但要配合上后端相对应的处理：

可以接收

public ServerResponse login(@RequestBody JSONObject jsonParam){
     }

坑：报错Required String parameter ‘xxx’ is not present 请求头改了也没用离谱

public ServerResponse login(@RequestParam("username") String username，参数2，参数3){}

@RequestParam按道理接收的到，但是就是不行，离谱。

只能说如果有小伙伴遇到了同样的问题希望可以帮倒忙。

如果有大佬知道可以解释一下感激不尽，省的再查了。不过bug还是帮助记忆和理解了哈哈。