axios访问SpringBoot的接口需要跨域,故需要在SpringBoot添加CORS配置。
package com.example.util;
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;
/**配置全局跨域
* @author SMILE
*/
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
System.out.println("跨域配置。。。");
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 2允许任何头
corsConfiguration.addAllowedMethod("*"); // 3允许任何方法(post、get等)
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
System.out.println("启动跨域方法。。。。。");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
}
请求接口
@RestController
public class AxiosController {
// @ResponseBody用在方法上
// 方法的返回值不再表示view视图页面,而是把返回值直接作为响应结果显示在浏览器上
// @RequestBody用在方法参数上
// 把请求参数编码方式为application/json的对象,转换成一个bean对象
@PostMapping("/axios")
public Role postAxios(@RequestBody Role role){
System.out.println(role);
return role;
}
@GetMapping("/axios")
public Role getAxios(Role role){
System.out.println(role);
return role;
}
}
发送post请求
axios({
method: 'post',
url: 'http://localhost:8083/axios',
data: {
rId:4,
rName:'小红'
}
}).then(res=>{
console.log(res.data);
}).catch(err=>{
console.log(err);
})
发送get请求
axios({
method: 'get',//不写此参数默认为get
url: 'http://localhost:8083/axios',
params: {
rId:4,
rName:'小红'
}
}).then(res=>{
console.log(res.data);
}).catch(err=>{
console.log(err);
})