spring boot ajax跨域的两种方式

2023年6月11日上午11:54 • JavaScript

当使用Spring Boot框架开发Web应用程序时，可以使用Ajax来进行异步请求和响应。但是在跨域请求时，会涉及到浏览器的一些限制，比如同源政策。本文内容将详细介绍使用Spring Boot如何解决Ajax跨域问题。

1. 什么是Ajax跨域问题

Ajax跨域问题指的是浏览器所遵循的同源策略，导致无法利用Ajax去向不同源的服务器发送请求。跨域请求会被浏览器拦截，直接抛出异常，从而导致无法获取到响应数据。

2. Ajax跨域解决方案

在Spring Boot中，解决Ajax跨域问题有两种常见的方式。

2.1 使用Spring MVC的CORS配置

CORS（Cross-Origin Resource Sharing）是HTML5标准中的一项功能，允许Web应用服务器进行跨域访问控制。在Spring MVC中，可以通过定义一个filter或添加@CrossOrigin注解来配置CORS。

以下是定义一个CORS filter的示例代码：

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter {

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Authorization, Content-Type");
        response.setHeader("Access-Control-Max-Age", "3600");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}
}

在上述示例代码中，Chain.doFilter()方法可以放行请求。Access-Control-Allow-Origin字段是必须设置的，否则会抛出异常。

2.2 使用JsonP

JsonP是一种绕过跨域限制的方法，它会在页面上动态生成script标签，代替Ajax去请求数据。JsonP需要浏览器端的支持，在前端中需要设置callback函数处理响应的返回结果。在Spring Boot中，可以很方便地返回一个JsonP对象。

以下是示例代码：

@RequestMapping("/jsonp")
@ResponseBody
public String jsonp(@RequestParam(value="callback",required=true) String callback) {
    Map<String, String> map = new HashMap<String, String>();
    map.put("name", "John");
    map.put("age", "32");
    return callback + "(" + new Gson().toJson(map) + ")";
}

在这个示例代码中，@RequestParam注解用来获取请求参数callback的值。使用Gson库将map对象转换为Json字符串，最后在返回值前拼接callback函数名。

在前台代码中，需要定义一个callback函数来处理响应结果。例如：

<script>
function myCallback(jsonData) {
    console.log(jsonData);
}
var url = "http://localhost:8080/jsonp?callback=myCallback";
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
</script>

在上述代码中，通过动态创建script标签去请求跨域数据，响应结果会被传给myCallback函数。callback函数和url参数需要替换为服务端定义的callback函数名和JsonP请求URL。