1.配置拦截器
<mvc:interceptors>
<mvc:interceptor>
<!-- 所有的请求都进入拦截器 -->
<mvc:mapping path="/**" />
<!-- 配置具体的拦截器 -->
<bean class="cn.itcast.ssm.Interceptor.MHandlerInterceptor" />
</mvc:interceptor>
</mvc:interceptors>
2.拦截器实现类
public class MHandlerInterceptor extends HandlerInterceptorAdapter {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, accept, content-type, xxxx");
response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
response.setHeader("Access-Control-Allow-Origin", "*");
System.out.println("我真的执行了");
return true;
}
}
3.controller层
@Controller
public class UserController {
@Autowired
private UserMapper userMapper;
@RequestMapping(value="/getUser")
public @ResponseBody
User findUser(){
System.out.println("~~~~~~~~~~~~");
User user1 = userMapper.findUserById(1);
return user1;
}
}
4.配置 vue项目中config/index.js文件(生成)
proxyTable: {
'/api': {
// target:'http://ad.ydh123.com/f',
target: 'http://10.0.1.60:8080/ning/',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,//我发现这个不加也可以
pathRewrite: {
'^/api': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
},
5.main.js配置axios
import axios from 'axios';
axios.defaults.withCredentials = true;
Vue.prototype.$axios = axios
6.组件中发送请求
getSwiperList(){
this.$axios
.post("/api/getUser.action",{},{
})
.then((response)=> {
console.log(response)
}).catch((error)=>{
console.log(error);
});
},