什么是跨域?
不同服务器,不同项目,不同端口,满足以上三点任意一点的都是跨域请求
如何解决?
①前端
在Vue-Cli的核心配置文件main.js中,创建axios实例时允许使用凭证(Session)
/**
* 导入axios
*/
import axios from 'axios';
/**
* 创建axios实例
*/
let axiosInstance = axios.create({
baseURL: 'http://localhost/VueServe/', //设置服务端基础路径
timeout: 1000, //设置超时时间
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: true, // default =false 允许使用凭证
headers: {'X-Requested-With': 'XMLHttpRequest'} //设置请求头为Ajax请求
});
//设置axios实例对象为一个原型属性 ,注册为VUE的原型属性后就可以在VUE视图中使用‘this.属性名’来调用 $axios 为属性名
Vue.prototype.$axios=axiosInstance;
②后端
可以单独写配置类,也可以在主启动类中进行编写
@SpringBootApplication
public class VueServeApplication {
public static void main(String[] args) {
SpringApplication.run(VueServeApplication.class, args);
}
@Bean
public WebMvcConfigurer webMvcConfigurer(){
return new WebMvcConfigurer() {
/**
* 重写跨域映射,在其中进行跨域配置
* @param registry 跨域注册器
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/testController/*")//指定当前项目中哪些资源可以跨域访问 /** 表示根目录下的所有目录 允许所有资源被访问
.allowedMethods("*")//允许哪些请求方式可以跨越访问(GET/POST/DELETE/PUT) * 表示所有请求
.allowCredentials(true)//是否允许使用凭证 session
.allowedOrigins("http://localhost:8080");//允许哪些项目(资源)跨域访问本应用 此处指定的另一个项目的路径
WebMvcConfigurer.super.addCorsMappings(registry);
}
};
}
}