问题原因
浏览器不能访问 协议/host/port 不同的其它域的服务器 , 要坚守同源策略保证安全性 ,
解决方案 : 1. 后端解决 / 2. 前端代理访问
方式一 : 后端解决
- Vue前端项目中 直接发送axios请求 , 请求真实接口
selectAdmin() {
axios.get('http://localhost:8080/selectAll').then(
response => {
this.tableData = response.data
},
error => {
console.log('失败', error);
}
)
}
},
- SpringBoot中 使用@CrossOrigin注解 , 一个注解解决
@CrossOrigin //Controller或具体的handler上加@CrossOrigin都是可以的
@RestController
public class AdminController {
@Autowired
private AdminManagerService adminManagerService;
@GetMapping("/selectAll")
public List<Admin> selectAllAdmin(){
List<Admin> admins = adminManagerService.selectAllAdmin();
System.out.println(admins);
return admins;
}
}
方式二 : 前端解决
- 按path请求
selectAdmin() {
axios.get('/api/selectAll').then(
response => {
this.tableData = response.data
},
error => {
console.log('失败', error);
}
)
}
},
- vue.config.js中 配置代理
devServer: {
proxy:{
'/api':{
// 匹配到以/api为开头的请求
target:'http://localhost:8080/', //拼上目标服务器路径
pathRewrite:{
'^/api':''}, // 可以设定path重写, 去掉或保留路径上的api
ws:true, // websocket 开启
changeOrigin:true, // 开启跨域
}
}
}
- 此时后端无需加注解也可以正常访问返回数据