Web 开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS 等等,CORS 与 JSONP 的比较如下:

  • JSONP 只能实现 GET 请求,而 CORS 支持所有类型的 HTTP 请求。
  • 使用 CORS,开发者可以使用普通的 XMLHttpRequest 发起请求和获得数据,比起 JSONP 有更好的错误处理。
  • JSONP 主要被老的浏览器支持,它们往往不支持 CORS,而绝大多数现代浏览器都已经支持了 CORS。

CORS 存在两种方式的配置,一种是全局配置,一种是细粒度配置(单个 Controller 配置)。

全局配置

  1. @Configuration
  2. public class CustomCorsConfiguration {
  3. @Bean
  4. public WebMvcConfigurer corsConfigurer() {
  5. return new WebMvcConfigurerAdapter() {
  6. @Override
  7. public void addCorsMappings(CorsRegistry registry) {
  8. registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
  9. }
  10. };
  11. }
  12. }

比如存在两个服务,一个是 http://localhost:8080 域名的,一个是 http://localhost:8081 域名的,http://localhost:8080 请求跳转到一个页面,有个点击事件,Ajax 请求 http://localhost:8081 域名的一个 api 开头的接口,这种请求就可以通过上面的配置实现跨域。

全局配置还有一种配置方式:

  1. @Configuration
  2. public class CustomCorsConfiguration2 extends WebMvcConfigurerAdapter {
  3. @Override
  4. public void addCorsMappings(CorsRegistry registry) {
  5. registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
  6. }
  7. }

细粒度配置

  1. @RestController
  2. @RequestMapping(value = "/api", method = RequestMethod.POST)
  3. public class ApiController {
  4. @CrossOrigin(origins = "http://localhost:8080")
  5. @RequestMapping(value = "/get")
  6. public HashMap<String, Object> get(@RequestParam String name) {
  7. HashMap<String, Object> map = new HashMap<String, Object>();
  8. map.put("title", "hello world");
  9. map.put("name", name);
  10. return map;
  11. }
  12. }