springboot+jsonp解决前端跨域问题小结

下面是“springboot+jsonp解决前端跨域问题小结”的详细攻略。

前言

在开发前后端分离的应用时，常常会遇到前端请求后端时跨域的问题。这个时候，可以采用jsonp方式来解决跨域问题。

引入依赖

在我们使用springboot+jsonp的时候，需要引入一下两个依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <version>2.4.5</version>
</dependency>

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.75</version>
</dependency>

配置SpringMVC

我们需要配置SpringMVC，允许jsonp的请求。我们需要在WebMvcConfigurer中注册我们的拦截器：

@Configuration
public class MvcConfiguration implements WebMvcConfigurer {

    /**
     * 注册自定义拦截器，允许jsonp的请求
     *
     * @param registry
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new JsonpInterceptor()).addPathPatterns("/**");
    }
}

其中，我们的 JsonpInterceptor 的实现如下：

/**
 * 自定义拦截器，允许jsonp请求
 */
public class JsonpInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
        String callback = request.getParameter("callback");
        if (callback != null) {
            response.setContentType("text/javascript");
            try {
                response.getWriter().write(callback + "(");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
            ModelAndView modelAndView) throws Exception {
        String callback = request.getParameter("callback");
        if (callback != null) {
            try {
                response.getWriter().write(")");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

编写Controller

完成了以上配置后，我们就可以开始编写Controller了。下面展示两个示例说明：

返回 JSON

@RestController
@RequestMapping("/api")
public class ApiController {

    @GetMapping("/user")
    public Map<String, Object> getUser(@RequestParam String name) {
        Map<String, Object> map = new HashMap<>();
        map.put("name", name);
        map.put("age", 18);
        return map;
    }
}

该Controller返回的是一个Map类型，其中包含了 name 和 age 两个属性，我们可以直接通过浏览器访问该Controller，获取相应的JSON数据：

http://localhost:8080/api/user?name=Tom

返回结果：

{"name":"Tom","age":18}

返回 JSONP

如果我们需要返回JSONP类型的数据，只需要在Controller的方法上添加 @ResponseBody 和 @RequestMapping 注解，并使用FastJson进行JSONP字符串的转换：

@RestController
@RequestMapping("/api")
public class ApiController {

    @GetMapping("/jsonp")
    @ResponseBody
    public String getUserJsonp(@RequestParam String name, @RequestParam String callback) {
        Map<String, Object> map = new HashMap<>();
        map.put("name", name);
        map.put("age", 18);
        return callback + "(" + JSON.toJSONString(map) + ")";
    }
}

该Controller返回的是一个JSONP字符串，其中使用了 callback 参数来指定回调函数。我们可以通过以下URL进行测试：

http://localhost:8080/api/jsonp?name=Tom&callback=handleResponse