最近在学习vue，这几天想怎么实现后台调用呢？于是就用axios进行后端接口的调用，结果发现调不通。。。
1.前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后端请求调用</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="name"/>
<button v-on:click="selectPeople">查询</button>
<ul>
<li v-for="(people, index) in peoples">
{{index}}---{{people.name}}---{{people.age}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
name: '',
peoples: [{name: "小红", age: 123}]
},
methods: {
selectPeople(){
// 1.将指向vue对象的this赋值给外部方法定义的属性，然后在内部方法中使用该属性
// let _this = this;
axios({
method: 'post',
url: 'http://127.0.0.1:8080/test',
data: {
name: '小红',
age: 123
}
})
// .then(function (response) {
// _this.peoples.splice(0, 0, response.data);
// console.log(_this.peoples);
// })
// 2.使用箭头函数
.then((response) => {
this.peoples.splice(0, 0, response.data);
console.log(this.peoples);
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
2.后台代码
2.1使用@CrossOrigin注解
@RestController
//@CrossOrigin //所有域名均可访问该类下所有接口
@CrossOrigin("指定域名") //只有指定域名可以访问该类下的接口
public class TestController {
@RequestMapping("/test")
public Person getMessage(@RequestBody Person person){
return person;
}
}
2.2CORS全局配置-实现WebMvcConfigurer
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Bean
public WebMvcConfigurer corsConfigurer(){
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").
allowedOrigins("*"). //允许跨域的域名，可以用\*表示允许任何域名使用
allowedMethods("*"). //允许任何方法（post、get等），可以用\*表示允许任何域名使用
allowedHeaders("*"). //允许任何请求头，可以用\*表示允许任何域名使用
allowCredentials(true). //带上cookie信息
exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L); //maxAge(3600)表明在3600秒内，不需要再发送预检验请求，可以缓存该结果
}
};
}
}
2.3拦截器实现
@Component
public class CorsFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse res = (HttpServletResponse) response;
res.addHeader("Access-Control-Allow-Credentials", "true");
res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
response.getWriter().println("ok");
return;
}
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
}
java
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。