Web 开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS 等等,CORS 与 JSONP 的比较如下:
- JSONP 只能实现 GET 请求,而 CORS 支持所有类型的 HTTP 请求。
- 使用 CORS,开发者可以使用普通的 XMLHttpRequest 发起请求和获得数据,比起 JSONP 有更好的错误处理。
- JSONP 主要被老的浏览器支持,它们往往不支持 CORS,而绝大多数现代浏览器都已经支持了 CORS。
CORS 存在两种方式的配置,一种是全局配置,一种是细粒度配置(单个 Controller 配置)。
全局配置
@Configuration
public class CustomCorsConfiguration {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
}
};
}
}
比如存在两个服务,一个是 http://localhost:8080 域名的,一个是 http://localhost:8081 域名的,http://localhost:8080 请求跳转到一个页面,有个点击事件,Ajax 请求 http://localhost:8081 域名的一个 api 开头的接口,这种请求就可以通过上面的配置实现跨域。
全局配置还有一种配置方式:
@Configuration
public class CustomCorsConfiguration2 extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
}
}
细粒度配置
@RestController
@RequestMapping(value = "/api", method = RequestMethod.POST)
public class ApiController {
@CrossOrigin(origins = "http://localhost:8080")
@RequestMapping(value = "/get")
public HashMap<String, Object> get(@RequestParam String name) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("title", "hello world");
map.put("name", name);
return map;
}
}