Spring boot解决Ajax跨域问题

什么是跨域

跨域问题来源于JavaScript的同源策略 即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问，否则，有任意一个不相同，则产生跨域问题。

1、第一种过滤器方式

当然我们的过滤器需要被启动类扫描到才可以！

import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class MyAjaxFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        HttpServletRequest request = (HttpServletRequest)servletRequest;
        String origin = request.getHeader("Origin");
        // 指定允许其他域名访问。此处可以使用* 来表示所有，但设置为*后，所有的请求都不会携带附带身份凭证(比如cookie)；
        response.setHeader("Access-Control-Allow-Origin", origin);
        // 允许跨域请求本站的方式 *代表所有
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT");
        //指定非简单请求的预检请求缓存时间,否则每次请求都请求两次。
        // 因为同源策略的影响，浏览器会向请求的服务器发送两次请求，第一次是预检请求，第二次才是真正的请求
        response.setHeader("Access-Control-Max-Age", "3600");
        // 允许的请求头
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

2、第二种CORS方式

CORS是一个W3C标准，全称为 Cross-Origin Resource Sharing）”跨域资源共享”，它允许浏览器向跨域服务器发送Ajax请求，从而打破了Ajax只能访问本站内的资源限制。
因为目前为止几乎所有的浏览器都支持CORS，所以我们只需要配置服务端即可。

使用方式如下：

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;

@Configuration
public class CorsConfig {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法

        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 4 对接口配置跨域设置
        source.registerCorsConfiguration("/**", buildConfig()); 
        return new CorsFilter(source);
    }
}

注意：虽然localhost和127.0.0.1指向的是同一个地址，但是也会产生跨域问题。