Spring Boot Web應用開發(fā) CORS 跨域請求支持

更新時間：2017年05月27日 08:49:11 作者：jerome_s

本篇文章主要介紹了Spring Boot Web應用開發(fā) CORS 跨域請求支持，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、Web開發(fā)經(jīng)常會遇到跨域問題，解決方案有：jsonp，iframe,CORS等等

CORS與JSONP相比

1、 JSONP只能實現(xiàn)GET請求，而CORS支持所有類型的HTTP請求。

2、使用CORS，開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請求和獲得數(shù)據(jù)，比起JSONP有更好的錯誤處理。

3、 JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了CORS

瀏覽器支持情況

Chrome 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+

二、在spring MVC 中可以配置全局的規(guī)則，也可以使用@CrossOrigin注解進行細粒度的配置。

全局配置：

@Configuration
public class CustomCorsConfiguration {
 
 @Bean
 public WebMvcConfigurer corsConfigurer() {
  return new WebMvcConfigurerAdapter() {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
     }
  };
 }
}

或者是

/**
 * 全局設置
 *
 * @author wujing
 */
@Configuration
public class CustomCorsConfiguration2 extends WebMvcConfigurerAdapter {
 
 @Override
 public void addCorsMappings(CorsRegistry registry) {
  registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
 }
}

定義方法：

/**
 * @author wujing
 */
@RestController
@RequestMapping("/api")
public class ApiController {
 
 @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;
 }
}

測試js：

$.ajax({
          url: "http://localhost:8081/api/get",
        type: "POST",
        data: {
          name: "測試"
        },
        success: function(data, status, xhr) {
          console.log(data);
          alert(data.name);
        }
       });

細粒度配置

 /**
 * @author wujing
 */
@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;
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: