博客

在做毕业设计过程中，需要将前后端完全分离，在这里就涉及到了前后端跨域访问的问题，在前端使用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在根包下就没有问题了