在做毕业设计过程中,需要将前后端完全分离,在这里就涉及到了前后端跨域访问的问题,在前端使用Ajax与Spring Boot后台进行通信。通过查找其他博客,我发现了下面这些方法:
1. 在HTML文件中添加下面这句话
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Access-Control-Allow-Methods" content="POST,GET">
不过添加了这句话之后,在运行时控制台抛出了这个警告
已拦截跨源请求:同源策略禁止读取位于 http://xxx:8080/login 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。
.
所以好像这个方法并没有能够起到什么作用,在返回数据的时候仍然没有能够获取到。
2. 使用JSONP进行数据传输。在ajax进行数据传递时,将
dataType
类型设置为
JSONP
。不过这种方法也有一些不便的方式:
– JSONP只能使用get方法进行 原因戳
jsonp为什么不支持POST请求
– 使用JSONP时,还需要在ajax中添加
jsonpCallback: "getResult"
,并且要在返回的json格式的中添加上这个callback的名称。例如:
return "getResult({'name':'get Your Name is "+name+"'})";
否则的话就会报一堆莫名其妙的错误
3.目前我使用的是第三种方法,通过在Spring Boot中配置跨域访问属性来实现。在Application.java文件中,或者新建一个CorsConfig文件,引入
@Configuration
注解。添加如下代码:
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
/**
* Addressing cross-domain access issues.
* @return
*/
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
注意在导包的时候,要选择
org.springframework.web.cors
包。
或者你也可以选择更方便的方法,直接在controller中添加
@crossorigin
注解也可以。
需要注意的是,ajax传入的值是json,那么需要确保返回值也是json格式,不然也会报出各种莫名其妙的错误
顺便说一个Spring Boot别的坑
由于自己学艺不精,刚入门就下手使用Spring Boot,在使用的时候,为了保持目录简介,就把application.java移动到了别的目录下,导致项目一直报404错误,后来发现,application在根包下就没有问题了