创建一个CrossingConfig配置类,复制下面的代码粘贴即可,如图:
package com.springboot.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* @ClassName: CrossingConfig
* @Description: 实现基本的跨域请求
*
* 可以在这里配置跨域请求后就不用在vue项目配置,在vue项目里面直接这样访问
show () {
this.$ajax.get('http://localhost:8089/user/list').then((resp) => { // 从本地请求的数据接口
const datas = resp.data
console.log(datas)
}).catch((err) => {
console.log(err)
})
}
* 也可以不用在这里配置,在vue项目的config文件夹下的index.js文件配置跨域请求
proxyTable: {
'/api': { // /api可以代理http://localhost:8089
target: 'http://localhost:8089', //后端接口地址
changeOrigin: true, //是否允许跨越
pathRewrite: { //路径重写
'^/api': '', //重写,用'/api'代替target里面的地址
}
}
},
* 在vue项目里面直接这样访问
show () {
this.$ajax.get('/api/user/list').then((resp) => { // 从本地请求的数据接口
const datas = resp.data
console.log(datas)
}).catch((err) => {
console.log(err)
})
}
* 也可以两个地方都配置
*/
@Configuration // 表示该类是一个配置类
public class CrossingConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 允许任何头
corsConfiguration.addAllowedMethod("*"); // 允许任何方法(post、get等)
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置
return new CorsFilter(source);
}
}