解决Vue+Springboot跨域请求问题

由于前后端涉及到两个服务器，所以需要解决跨域请求问题，这样才能从后端获取数据。

前端使用axios解决：

1. 首先需要在前端项目处安装axios，执行：npm install axios --save
2. 然后设置跨域信息，在vue.config.js文件中配置：

devServer: {
  //第二步：设置跨域信息
  //前提是第一步在本项目根目录路径下执行过 npm install axios --save
  proxy: {
    "/api": {//带有“api”的url请求，会把请求跨域到http://127.0.0.1:8080
      target: "http://127.0.0.1:8080",
      changeOrigin: true,//改变源
      pathRewrite: {
        "^/api": ""//路径重写，使用“/api”代替target，【跨域时把“/api”替换为“”】
      }
    }
  }
}

1. 最后在main.js中引入axios：

/* 第三步：axios：用于发送请求 */
import axios from 'axios' //引入axios
Vue.prototype.$axios = axios;//配置axios
/* 配置跨域：在vue.config.js或/config/index.js中会重写跨域路径，
   若前缀带有“api”的请求，则会进行跨域访问 */
Vue.prototype.Host = 'api';

1. 最后在请求数据时，url使用Host+后端接口就可以了

然后是后端：

在controller同级创建一个config文件夹，然后创建一个类用于跨域：

@Configuration
public class CrosConfig implements WebMvcConfigurer {
//    解决跨域问题
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","DELETE","OPTIONS","PUT")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

最后在运行项目时，要先启动后端（获取数据），再启动前端（从后端获取数据）。