Spring Boot Webアプリケーション開発CORSドメイン横断要求サポート

一、Web開発はしばしばドメインをまたぐ問題に遭遇します。解決策はjsonp、iframe、CORSなどがあります。
CORSはJSONPに比べて
1、JSONPはGET要求しか実現できません。CORSはすべてのタイプのHTTP要求をサポートします。
2、CORSを使用して、開発者は普通のXMLHttpRequestを使って要求とデータを取得できます。JSONPよりもっと良いエラー処理があります。
3、JSONPは主に古いブラウザに支持されています。彼らは往々にしてCORSを支持しないが、ほとんどの現代ブラウザはCORSを支持しています。
ブラウザのサポート状況

Chrome 3+

Firefox 3.5+

Opera 12+

Safari 4+

インターネットExplorer 8+

 二、spring MVCにグローバルなルールを配置することができます。@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;
 }
}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。