iview-admin 和 spring boot的后端对接的坑

最新推荐文章于 2020-08-27 10:00:19 发布

半世浮华殆尽

最新推荐文章于 2020-08-27 10:00:19 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签：前端后端 axios spring boot

本文链接：https://blog.csdn.net/sinat_18497785/article/details/97029160

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端后端对应的几点坑，列在下面供大家参考

文章目录

跨域
- 前端处理跨域
- 后端处理跨域
后端接口和前端post的方式要一致

跨域

前端处理跨域

iview-admin遇到的跨域请参考https://blog.csdn.net/xiandong86/article/details/81916408或者github项目上的相关issue
其实本次我踩得坑一直以为是这个的原因，但是越搞越觉得不对明明我都是localhost开发的，后来发现应该注意一下是不是后端跨域处理的问题

后端处理跨域

参考文章
https://www.jianshu.com/p/4ef9881090ec
通过在项目的目录下新建了个配置类
按照如下代码进行配置就可以解决问题

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

@Configuration
public class CorsConfig {
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 设置你要允许的网站域名，如果全允许则设为 *
        config.addAllowedOrigin("http://localhost:4200");
        // 如果要限制 HEADER 或 METHOD 请自行更改
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        // 这个顺序很重要哦，为避免麻烦请设置在最前
        bean.setOrder(0);
        return bean;
    }
}

后端接口和前端post的方式要一致

等上面跨域的问题解决了，发现又遇到了新的问题，明明在postman中去请求接口正常，到前端去调用时，控制台就打印了某个字段不存在，而且Chrome的控制台调试看到发送post请求也有问题
根本原因出在，我前端用了axios默认的post方式，而spring的接口是@RequestParam类型的

HTTP请求中的Form Data与Request Payload的区别

浏览器中看到的区别

参考https://github.com/kaola-fed/blog/issues/105

方式一： Form Data形式
当POST请求的请求头里设置Content-Type: application/x-www-form-urlencoded(默认), 参数在请求体以标准的Form Data的形式提交，以&符号拼接，参数格式为key=value&key=value&key=value…
在chrome的控制台里看到的网络请求的头是这样的
在这里插入图片描述
看到的请求的内容是form data

方式二：Request Payload形式
如果使用AJAX原生POST请求,请求头里设置Content-Type:application/json，请求的参数会显示在Request Payload中，参数格式为JSON格式：{“key”:“value”,“key”:“value”…}，这种方式可读性会更好。
看到的请求头
在这里插入图片描述
看到的请求的内容是Request Payload

axios怎么处理

https://juejin.im/post/5b3c37e65188251aaa2d087a

近期在利用axios向后台传数据时，axios默认传的是用application/json格式，若后台需要的数据格式为key/value格式，可以在axios的config中进行配置，也可以用qs.stringify()方法进行转换

注：若用原生的标签对后台进行post传输数据，默认即为key/value格式

我用的是下面的方法二
利用qs.stringify()进行转换

import qs from 'qs' // qs在安装axios后会自动安装，只需要组件里import一下即可

// 代码省略...

dataObj = qs.stringify(dataObj) // 得到转换后的数据为 string 类型

this.$axios({
  method: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  data: dataObj,  // 直接提交转换后的数据即可
})

对于iview-admin来说在iview-admin/src/api/*.js这个路径下都是抽离出来的axios请求，在js文件头部引入即可

@RequestParam, @RequestBody

参考https://blog.csdn.net/walkerJong/article/details/7946109
https://juejin.im/post/5b5efff0e51d45198469acea

上面两篇文章讲的很详细，用例也很全，
可以记住是以下这种对应关系
@RequestParam -> ‘Content-Type’: ‘application/x-www-form-urlencoded’ -> Form Data
@RequestBody ->‘Content-Type’: ‘application/application/json’ -> Request Payload