SpringBoot + Vue 解决跨域问题

问题原因

浏览器不能访问 协议/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, // 开启跨域

      }
    }
  }

• 此时后端无需加注解也可以正常访问返回数据